    

                <style type="text/css">
                    .sortable-placeholder {
                        height: 60px;
                        border: 1px solid yellow;
                    }
                </style>
                
                <section class="row">
                    <div class="col-lg-12">
                        <div>
                            <h1><i class="fa fa-dashboard"></i> Dashboard</h1>
                        </div>
                        <div>
                            <?= $this->breadcrumb->output(); ?>
                        </div>
                    </div>
                </section>
                
                <section class="row">
                    <div class="col-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h2 class="panel-title"><i class="fa fa-list-alt"></i> Panel with Sticky Guideline</h2>
                            </div>
                            <div class="panel-body no-padding">
                                
                                <div class="row">
                                    <div id="generic_btn_elements" class="col-2">
                                        
<!--                                        <ul class="list-group">
                                            <li class="list-group-item">
                                                <i class="fa fa-edit"></i> 
                                                Fieldset
                                            </li>
                                            <li class="list-group-item">Dapibus ac facilisis in</li>
                                            <li class="list-group-item">Morbi leo risus</li>
                                            <li class="list-group-item">Porta ac consectetur ac</li>
                                            <li class="list-group-item">Vestibulum at eros</li>
                                        </ul>-->
                                        
<!--                                        <button id="test-btn" class="btn btn-default btn-block"><i class="fa fa-edit"></i> Test Button</button>-->
                                        <button id="generic-fieldset-btn" class="btn btn-default btn-block"><i class="fa fa-edit"></i> Fieldset</button>
                                        <button id="generic-text-btn" class="btn btn-default btn-block"><i class="fa fa-edit"></i> Text Input</button>
                                        <button id="generic-longtext-btn" class="btn btn-default btn-block"><i class="fa fa-file"></i> Long Text</button>
                                        <button id="generic-datetime-btn" class="btn btn-default btn-block"><i class="fa fa-calendar"></i> Date &amp; Time</button>
                                        <button id="generic-single-btn" class="btn btn-default btn-block"><i class="fa fa-list-alt"></i> Single Data</button>
                                        <button id="generic-multiple-btn" class="btn btn-default btn-block"><i class="fa fa-tags"></i> Multiple Data</button>
                                        <button id="generic-fileupload-btn" class="btn btn-default btn-block"><i class="fa fa-upload"></i> File Uploader</button>
                                        <button id="generic-color-btn" class="btn btn-default btn-block"><i class="fa fa-tint"></i> Color Picker</button>
                                        <button id="generic-geolocation-btn" class="btn btn-default btn-block"><i class="fa fa-map-marker"></i> Geolocation</button>
                                        <button id="generic-toggle-btn" class="btn btn-default btn-block"><i class="fa fa-check"></i> Toggle</button>
                                        <button id="generic-captcha-btn" class="btn btn-default btn-block"><i class="fa fa-camera"></i> Captcha</button>
                                        <button id="generic-masked-btn" class="btn btn-default btn-block"><i class="fa fa-instagram"></i> Masked</button>
                                    </div>
                                    
                                    <div class="col-8">

                                        <div id="wysiwyg_form_guideline" class="guideline bg-info">
                                            <i class="fa fa-info-circle fa-lg"></i> Fields marked with <code>*</code> are required.
                                        </div>

                                        <form id="wysiwyg-form" action="<?= base_url() ?>generator/generate" method="post" class="form-bordered form-horizontal">
                                            <ol id="form-sortable">
                                                <li>
                                                    <fieldset>
                                                        <legend class="handle">Column 1</legend>
                                                        <ul class="sortable sortable-connected">
                                                            
                                                        </ul>
                                                    </fieldset>
                                                </li>
                                            </ol>
                                            <div class="submit-group col-12 align-right">
                                                <input type="reset" name="reset" class="btn btn-danger" value="Reset">
                                                <input type="submit" name="submit" class="btn btn-primary" value="Submit">
                                                <input type="button" name="cancel" class="btn btn-default" value="Cancel">
                                            </div>
                                        </form>

                                    </div>
                                    
                                    <div id="btn_elements" class="col-2">
                                        <button id="text-btn" class="btn btn-default btn-block"><i class="fa fa-edit"></i> Text Input</button>
                                        <button id="number-btn" class="btn btn-default btn-block"><i class="fa fa-plus"></i> Number Input</button>
                                        <button id="email-btn" class="btn btn-default btn-block"><i class="fa fa-envelope"></i> Email</button>
                                        <button id="url-btn" class="btn btn-default btn-block"><i class="fa fa-globe"></i> URL</button>
                                        <button id="password-btn" class="btn btn-default btn-block"><i class="fa fa-lock"></i> Password</button>
                                        <button id="textarea-btn" class="btn btn-default btn-block"><i class="fa fa-file-alt"></i> Textarea</button>
                                        <button id="wysiwyg-btn" class="btn btn-default btn-block"><i class="fa fa-align-center"></i> WYSIWYG</button>

                                        <button id="time-btn" class="btn btn-default btn-block"><i class="fa fa-time"></i> Time</button>
                                        <button id="date-btn" class="btn btn-default btn-block"><i class="fa fa-calendar"></i> Date</button>
                                        <button id="daterange-btn" class="btn btn-default btn-block"><i class="fa fa-calendar"></i> Date Range</button>
                                        <button id="datetime-btn" class="btn btn-default btn-block"><i class="fa fa-calendar"></i> Date &amp; Time</button>
                                        <button id="datetimerange-btn" class="btn btn-default btn-block"><i class="fa fa-calendar"></i> Date &amp; Time Range</button>
                                        <button id="timezone-btn" class="btn btn-default btn-block"><i class="fa fa-time"></i> Timezone</button>

                                        <button id="radio-btn" class="btn btn-default btn-block"><i class="fa fa-circle-blank"></i> Radio Button</button>
                                        <button id="single-dropdown-btn" class="btn btn-default btn-block"><i class="fa fa-list-alt"></i> Single Dropdown</button>

                                        <button id="multiple-dropdown-btn" class="btn btn-default btn-block"><i class="fa fa-list-alt"></i> Multiple Dropdown</button>
                                        <button id="checkbox-btn" class="btn btn-default btn-block"><i class="fa fa-check-empty"></i> Checkbox</button>
                                        <button id="tagsinput-btn" class="btn btn-default btn-block"><i class="fa fa-tags"></i> Tagsinput</button>

                                        <button id="image-upload-btn" class="btn btn-default btn-block"><i class="fa fa-picture"></i> Image Upload</button>
                                        <button id="button-upload-btn" class="btn btn-default btn-block"><i class="fa fa-upload-alt"></i> Button Upload</button>
                                        <button id="file-upload-btn" class="btn btn-default btn-block"><i class="fa fa-upload-alt"></i> File Upload</button>
                                        <button id="multiple-upload-btn" class="btn btn-default btn-block"><i class="fa fa-upload"></i> Multiple Upload</button>

                                        <button id="color-btn" class="btn btn-default btn-block"><i class="fa fa-tint"></i> Color Picker</button>
                                        <button id="geolocation-btn" class="btn btn-default btn-block"><i class="fa fa-map-marker"></i> Geolocation</button>

                                        <button id="toggle-btn" class="btn btn-default btn-block"><i class="fa fa-check"></i> Switch</button>
                                        <button id="captcha-btn" class="btn btn-default btn-block"><i class="fa fa-camera"></i> Captcha</button>
                                        <button id="masked-btn" class="btn btn-default btn-block"><i class="fa fa-instagram"></i> Masked Input</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                
                <!-- fieldset -->
                <div id="fieldset-modal" class="modal container fade" tabindex="-1" style="display: none;">
                    <div id="fieldset-modal-header" class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 id="fieldset-modal-title" class="modal-title">Fieldset</h4>
                    </div>
                    <div id="fieldset-modal-body" class="modal-body">
                        <div class="guideline bg-info">
                            <i class="icon-info-sign icon-large"></i> Fields marked with <code>*</code> are required.
                        </div>
                        <form action="" method="post" id="fieldset-form" class="form-bordered form-horizontal">
                            <fieldset>
                                <legend class="align-left">Column 1</legend>
                                <ul>
                                    <li class="form-group label-control row">
                                        <label for="legend-text" class="control-label col-4">
                                            Legend Text *
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="legend" id="legend-text" class="form-control" placeholder="Legend Title">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="legend-location" class="control-label col-4">
                                            Legend Location*
                                            <br><small>(Fieldset Legend)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="location" id="legend-location" class="form-control">
                                                        <option value="align-left" selected="selected">Left</option>
                                                        <option value="align-right">Right</option>
                                                        <option value="align-center">Center</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </fieldset>
                        </form>
                    </div>
                    <div id="fieldset-modal-footer" class="modal-footer">
                        <button type="button" id="fieldset-cancel-btn" data-dismiss="modal" class="btn btn-default">Close</button>
                        <button type="button" id="fieldset-save-btn" class="btn btn-primary">Create Fieldset</button>
                    </div>
                </div>
                
                <!-- Text -->
                <div id="text-input-modal" class="modal container fade" tabindex="-1" style="display: none;">
                    <div id="text-modal-header" class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 id="text-modal-title" class="modal-title">Text Input</h4>
                    </div>
                    <div id="text-modal-body" class="modal-body">
                        <div class="guideline bg-info">
                            <i class="icon-info-sign icon-large"></i> Fields marked with <code>*</code> are required.
                        </div>
                        <form id="text-input-form" class="form-bordered form-horizontal form-column">
                            <fieldset class="col-6">
                                <legend class="align-left">Column 1</legend>
                                <ul>
                                    <li class="form-group row">
                                        <label for="text-label" class="control-label col-4">
                                            Label *
                                            <br><small>(Input Label)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="label" id="text-label" class="form-control">
                                                        <option value="left">Left</option>
                                                        <option value="right" selected="selected">Right</option>
                                                        <option value="center">Center</option>
                                                        <option value="none">None</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group label-control row">
                                        <label for="text-bold-label" class="control-label col-4">
                                            Bold Label
                                            <br><small>(Make Labels Bold)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="bold-label" id="text-bold-label" class="switch" ></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group label-control row">
                                        <label for="text-label-text" class="control-label col-4">
                                            Label Text *
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="label-text" id="text-label-text" class="form-control" placeholder="Text Field">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="text-name" class="control-label col-4">
                                            Field Name *
                                            <br><small>(No Spaces)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="name" id="text-name" class="form-control" placeholder="text-field-name">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="text-id" class="control-label col-4">
                                            Field ID *
                                            <br><small>(Must be Unique)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="id" id="text-id" class="form-control" placeholder="text-field-id">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="text-placeholder" class="control-label col-4">
                                            Placeholder
                                            <br><small>(Sample Placeholder)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="placeholder" id="text-placeholder" class="form-control" placeholder="Text Field Placeholder">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="text-initial-value" class="control-label col-4">
                                            Initial Value
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="initial-value" id="text-initial-value" class="form-control" placeholder="Optional Initial Value">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li id="text-type-container" class="form-group row">
                                        <label for="text-type" class="control-label col-4">
                                            Field Type *
                                            <br><small>(Select One)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="type" id="text-type" class="form-control">
                                                        <option value="text" selected>Text</option>
                                                        <option value="number">Number</option>
                                                        <option value="email">Email</option>
                                                        <option value="url">URL</option>
                                                        <option value="password">Password</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group number-control row">
                                        <label for="text-spinner" class="control-label col-4">
                                            Spinner
                                            <br><small>(Select one to use Spinner)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="spinner" id="text-spinner" class="form-control">
                                                        <option value="none" selected>None</option>
                                                        <option value="vertical-right">Vertical Right</option>
                                                        <option value="vertical-left">Vertical Left</option>
                                                        <option value="vertical-both">Vertical Both</option>
                                                        <option value="vertical-right-inside">Vertical Right Inside</option>
                                                        <option value="vertical-left-inside">Vertical Left Inside</option>
                                                        <option value="vertical-both-inside">Vertical Both Inside</option>
                                                        <option value="horizontal-right">Horizontal Right</option>
                                                        <option value="horizontal-left">Horizontal Left</option>
                                                        <option value="horizontal-both">Horizontal Both</option>
                                                        <option value="horizontal-right-inside">Horizontal Right Inside</option>
                                                        <option value="horizontal-left-inside">Horizontal Left Inside</option>
                                                        <option value="horizontal-both-inside">Horizontal Both Inside</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group number-control spinner-control row">
                                        <label for="text-spinner-step" class="control-label col-4">
                                            Spinner Step *
                                            <br><small>(Place Value to Use Spinner)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="spinner-step" id="text-spinner-step" class="form-control" placeholder="0">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group password-control row">
                                        <label for="text-confirm-password" class="control-label col-4">
                                            Confirm Password
                                            <br><small>(Check to add Confirm Password)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="confirm-password" id="text-confirm-password" class="switch" ></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="text-db-type" class="control-label col-4">
                                            Data Type *
                                            <br><small>(Select One)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="db-type" id="text-db-type" class="form-control">
                                                        <option class="text" value="char">Char</option>
                                                        <option class="text" value="varchar" selected="selected">Varchar</option>
                                                        <option class="text" value="tinytext">Tiny Text</option>
                                                        <option class="text" value="text">Text</option>
                                                        <option class="text" value="mediumtext">Medium Text</option>
                                                        <option class="text" value="longtext">Long Text</option>
                                                        <option class="numeric" value="tinyint">Tiny Integer</option>
                                                        <option class="numeric" value="smallint">Small Integer</option>
                                                        <option class="numeric" value="int">Integer</option>
                                                        <option class="numeric" value="mediumint">Medium Integer</option>
                                                        <option class="numeric" value="bigint">Big Integer</option>
                                                        <option class="numeric" value="decimal">Decimal</option>
                                                        <option class="numeric" value="double">Double</option>
                                                        <option class="numeric" value="float">Float</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="text-min-length" class="control-label col-4">
                                            Min Length
                                            <br><small>(Minimum Characters)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="min-length" id="text-min-length" class="form-control" placeholder="2">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="text-max-length" class="control-label col-4">
                                            Max Length *
                                            <br><small>(Maximum Characters)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="max-length" id="text-max-length" class="form-control" placeholder="1000" value="1000">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </fieldset>

                            <fieldset class="col-6">
                                <legend class="align-left">Column 2</legend>
                                <ul>
                                    <li class="form-group row">
                                        <label class="control-label col-4">
                                            Validations
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="text-trim" class="switch" checked="checked" value="trim">Trim</label>
                                                    </div>
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="text-required" class="switch" checked="checked" value="required">Required</label>
                                                    </div>
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="text-xss-clean" class="switch" checked="checked" value="xss-clean">XSS Clean</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="text-show-list" class="control-label col-4">
                                            Show on List
                                            <br><small>(Show on Tables)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="show-list" id="text-show-list" class="switch" checked="checked"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="text-searchable" class="control-label col-4">
                                            Searchable
                                            <br><small>(APIs and Tables)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="searchable" id="text-searchable" class="switch" checked="checked"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="text-show-api" class="control-label col-4">
                                            Show on API
                                            <br><small>(Show on API return values)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="show-api" id="text-show-api" class="switch" checked="checked"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="text-icon" class="control-label col-4">
                                            Icon *
                                            <br><small>(Use Icon - Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="icon" id="text-icon" class="form-control">
                                                        <option value="right">Right</option>
                                                        <option value="left" selected>Left</option>
                                                        <option value="both">Both</option>
                                                        <option value="none">None</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group icon-control row">
                                        <label for="text-change-icon" class="control-label col-4">
                                            Change Icon
                                            <br><small>(Fontawesome or Text - Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="change-icon" id="text-change-icon" class="form-control" placeholder="&lt;i class=&quot;fa fa-edit&quot;&gt;&lt;/i&gt; or $">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="text-guideline" class="control-label col-4">
                                            Guideline
                                            <br><small>(Add Guideline)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="guideline" id="text-guideline" class="form-control">
                                                        <option value="none" selected="selected">None</option>
                                                        <option value="input-above">Above Input</option>
                                                        <option value="input-tooltip">Input Tooltip</option>
                                                        <option value="label-tooltip">Label Tooltip</option>
                                                        <option value="label">Below Label</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li id="text-guideline-title-container" class="form-group guideline-control row">
                                        <label for="text-guideline-title" class="control-label col-4">
                                            Guideline Title *
                                            <br><small>(Guideline title for Tooltips)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="guideline-title" id="text-guideline-title" class="form-control" placeholder="Guideline">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group guideline-control row">
                                        <label for="text-guideline-text" class="control-label col-4">
                                            Guideline Text *
                                            <br><small>(Type Guideline)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <textarea name="guideline-text" id="text-guideline-text" class="form-control" placeholder="User Guideline"></textarea>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="text-horizontal-size" class="control-label col-4">
                                            Horizontal Size *
                                            <br><small>(Input Width)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="horizontal-size" id="text-horizontal-size" class="form-control">
                                                        <optgroup label="Static Sizing">
                                                            <option value="x-small">X-Small</option>
                                                            <option value="small">Small</option>
                                                            <option value="medium">Medium</option>
                                                            <option value="large">Large</option>
                                                            <option value="x-large">X-large</option>
                                                        </optgroup>
                                                        <optgroup label="Dynamic Sizing">
                                                            <option value="col-2">2 Columns</option>
                                                            <option value="col-3">3 Columns</option>
                                                            <option value="col-4">4 Columns</option>
                                                            <option value="col-5">5 Columns</option>
                                                            <option value="col-6">6 Columns</option>
                                                            <option value="col-7">7 Columns</option>
                                                            <option value="col-8">8 Columns</option>
                                                            <option value="col-9">9 Columns</option>
                                                            <option value="col-0">10 Columns</option>
                                                            <option value="col-11">11 Columns</option>
                                                            <option value="col-12" selected>12 Columns</option>
                                                        </optgroup>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="text-vertical-size" class="control-label col-4">
                                            Vertical Size *
                                            <br><small>(Input Height)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="vertical-size" id="text-vertical-size" class="form-control">
                                                        <option value="input-sm">Small</option>
                                                        <option value="" selected="selected">Medium</option>
                                                        <option value="input-lg">Large</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="text-position" class="control-label col-4">
                                            Position *
                                            <br><small>(Input Position)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="position" id="text-position" class="form-control">
                                                        <option value="pull-left" selected="selected">Left</option>
                                                        <option value="align-center">Center</option>
                                                        <option value="pull-right">Right</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </fieldset>
                        </form>
                    </div>
                    <div id="text-modal-footer" class="modal-footer">
                        <button type="button" id="text-cancel-btn" data-dismiss="modal" class="btn btn-default">Close</button>
                        <button type="button" id="text-save-btn" class="btn btn-primary">Create Text Input</button>
                    </div>
                </div>
                
                <!-- long text -->
                <div id="textarea-modal" class="modal container fade" tabindex="-1" style="display: none;">
                    <div id="textarea-modal-header" class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 id="textarea-modal-title" class="modal-title">Textarea</h4>
                    </div>
                    <div id="textarea-modal-body" class="modal-body">
                        <div class="guideline bg-info">
                            <i class="icon-info-sign icon-large"></i> Fields marked with <code>*</code> are required.
                        </div>
                        <form id="textarea-form" class="form-bordered form-horizontal form-column">
                            <fieldset class="col-6">
                                <legend class="align-left">Column 1</legend>
                                <ul>
                                    <li class="form-group row">
                                        <label for="textarea-label" class="control-label col-4">
                                            Label *
                                            <br><small>(Input Label)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="label" id="textarea-label" class="form-control">
                                                        <option value="left">Left</option>
                                                        <option value="right" selected="selected">Right</option>
                                                        <option value="center">Center</option>
                                                        <option value="none">None</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group label-control row">
                                        <label for="textarea-bold-label" class="control-label col-4">
                                            Bold Label
                                            <br><small>(Make Labels Bold)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="bold-label" id="textarea-bold-label" class="switch"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group label-control row">
                                        <label for="textarea-label-text" class="control-label col-4">
                                            Label Text
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="label-text" id="textarea-label-text" class="form-control" placeholder="Title">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="textarea-name" class="control-label col-4">
                                            Field Name *
                                            <br><small>(No Spaces)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="name" id="textarea-name" class="form-control" placeholder="title">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="textarea-id" class="control-label col-4">
                                            Field ID *
                                            <br><small>(Must be Unique)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="id" id="textarea-id" class="form-control" placeholder="title">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="textarea-placeholder" class="control-label col-4">
                                            Placeholder
                                            <br><small>(Sample Placeholder)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="placeholder" id="textarea-placeholder" class="form-control" placeholder="This is a title field">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="textarea-initial-value" class="control-label col-4">
                                            Initial Value
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-size col-12">
                                                    <textarea name="initial-value" id="textarea-initial-value" class="form-control" placeholder="Initial Value"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li id="textarea-type-container" class="form-group row">
                                        <label for="textarea-type" class="control-label col-4">
                                            Field Type *
                                            <br><small>(Select One)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="type" id="textarea-type" class="form-control">
                                                        <option class="textarea" value="textarea" selected>Textarea</option>
                                                        <option class="wysiwyg" value="cleditor">CLEditor</option>
                                                        <option class="wysiwyg" value="ckeditor">CKEditor</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li id="textarea-db-type-container" class="form-group row">
                                        <label for="textarea-db-type" class="control-label col-4">
                                            Data Type *
                                            <br><small>(Select One)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="db-type" id="textarea-db-type" class="form-control">
                                                        <option class="text" value="varchar" selected="selected">Varchar</option>
                                                        <option class="text" value="text">Text</option>
                                                        <option class="text" value="mediumtext">Medium Text</option>
                                                        <option class="text" value="longtext">Long Text</option>
                                                        <option class="text" value="tinyblob">Tiny Blob</option>
                                                        <option class="text" value="mediumblob">Medium Blob</option>
                                                        <option class="text" value="blob">Blob</option>
                                                        <option class="text" value="longblob">Long Blob</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="textarea-min-length" class="control-label col-4">
                                            Min Length
                                            <br><small>(Minimum Characters)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="min-length" id="textarea-min-length" class="form-control" placeholder="2">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="textarea-max-length" class="control-label col-4">
                                            Max Length *
                                            <br><small>(Maximum Characters)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="max-length" id="textarea-max-length" class="form-control" placeholder="1000" value="1000">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </fieldset>

                            <fieldset class="col-6">
                                <legend class="align-left">Column 2</legend>
                                <ul>
                                    <li class="form-group row">
                                        <label class="control-label col-4">
                                            Validations
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="textarea-trim" class="switch" checked="checked" value="trim">Trim</label>
                                                    </div>
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="textarea-required" class="switch" checked="checked" value="required">Required</label>
                                                    </div>
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="textarea-xss-clean" class="switch" checked="checked" value="xss_clean">XSS Clean</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="textarea-show-list" class="control-label col-4">
                                            Show on List
                                            <br><small>(Show on Tables)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="show-list" id="textarea-show-list" class="switch" checked="checked"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="textarea-searchable" class="control-label col-4">
                                            Searchable
                                            <br><small>(APIs and Tables)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="searchable" id="textarea-searchable" class="switch" checked="checked"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="textarea-show-api" class="control-label col-4">
                                            Show on API
                                            <br><small>(Show on API return values)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="show-api" id="textarea-show-api" class="switch" checked="checked"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="textarea-guideline" class="control-label col-4">
                                            Guideline
                                            <br><small>(Add Guideline)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="guideline" id="textarea-guideline" class="form-control">
                                                        <option value="none" selected="selected">None</option>
                                                        <option value="input-above">Above Input</option>
                                                        <option value="label-tooltip">Label Tooltip</option>
                                                        <option value="input-tooltip">Input Tooltip</option>
                                                        <option value="label">Below Label</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li id="textarea-guideline-title-container" class="form-group guideline-control row">
                                        <label for="textarea-guideline-title" class="control-label col-4">
                                            Guideline Title *
                                            <br><small>(Guideline title for Tooltips)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="guideline-title" id="textarea-guideline-title" class="form-control" placeholder="Guideline">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group guideline-control row">
                                        <label for="textarea-guideline-text" class="control-label col-4">
                                            Guideline Text *
                                            <br><small>(Type Guideline)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <textarea name="guideline-text" id="textarea-guideline-text" class="form-control" placeholder="User Guideline"></textarea>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="textarea-horizontal-size" class="control-label col-4">
                                            Horizontal Size *
                                            <br><small>(Input Width)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="horizontal-size" id="textarea-horizontal-size" class="form-control">
                                                        <optgroup label="Static Sizing">
                                                            <option value="x-small">X-Small</option>
                                                            <option value="small">Small</option>
                                                            <option value="medium">Medium</option>
                                                            <option value="large">Large</option>
                                                            <option value="x-large">X-large</option>
                                                        </optgroup>
                                                        <optgroup label="Dynamic Sizing">
                                                            <option value="col-2">2 Columns</option>
                                                            <option value="col-3">3 Columns</option>
                                                            <option value="col-4">4 Columns</option>
                                                            <option value="col-5">5 Columns</option>
                                                            <option value="col-6">6 Columns</option>
                                                            <option value="col-7">7 Columns</option>
                                                            <option value="col-8">8 Columns</option>
                                                            <option value="col-9">9 Columns</option>
                                                            <option value="col-0">10 Columns</option>
                                                            <option value="col-11">11 Columns</option>
                                                            <option value="col-12" selected>12 Columns</option>
                                                        </optgroup>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="textarea-vertical-size" class="control-label col-4">
                                            Vertical Size *
                                            <br><small>(Input Height)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="vertical-size" id="textarea-vertical-size" class="form-control">
                                                        <option value="input-sm">Small</option>
                                                        <option value="" selected="selected">Medium</option>
                                                        <option value="input-lg">Large</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="textarea-position" class="control-label col-4">
                                            Position *
                                            <br><small>(Input Position)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="position" id="textarea-position" class="form-control">
                                                        <option value="pull-left" selected="selected">Left</option>
                                                        <option value="align-center">Center</option>
                                                        <option value="pull-right">Right</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                </ul>
                            </fieldset>
                        </form>
                    </div>
                    <div id="textarea-modal-footer" class="modal-footer">
                        <button type="button" id="textarea-cancel-btn" data-dismiss="modal" class="btn btn-default">Close</button>
                        <button type="button" id="textarea-save-btn" class="btn btn-primary">Create Textarea</button>
                    </div>
                </div>
                
                <!-- date and time -->
                <div id="datetime-modal" class="modal container fade" tabindex="-1" style="display: none;">
                    <div id="datetime-modal-header" class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 id="datetime-modal-title" class="modal-title">Date and Time Input</h4>
                    </div>
                    <div id="datetime-modal-body" class="modal-body">
                        <div class="guideline bg-info">
                            <i class="icon-info-sign icon-large"></i> Fields marked with <code>*</code> are required.
                        </div>
                        <form id="datetime-form" class="form-bordered form-horizontal form-column">
                            <fieldset class="col-6">
                                <legend class="align-left">Column 1</legend>
                                <ul>
                                    <li class="form-group row">
                                        <label for="datetime-label" class="control-label col-4">
                                            Label *
                                            <br><small>(Input Label)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="label" id="datetime-label" class="form-control">
                                                        <option value="left">Left</option>
                                                        <option value="right" selected="selected">Right</option>
                                                        <option value="center">Center</option>
                                                        <option value="none">None</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group label-control row">
                                        <label for="datetime-bold-label" class="control-label col-4">
                                            Bold Label
                                            <br><small>(Make Labels Bold)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="bold-label" id="datetime-bold-label" class="switch"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group label-control row">
                                        <label for="datetime-label-text" class="control-label col-4">
                                            Label Text
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="label-text" id="datetime-label-text" class="form-control" placeholder="Title">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="datetime-name" class="control-label col-4">
                                            Field Name *
                                            <br><small>(No Spaces)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="name" id="datetime-name" class="form-control" placeholder="title">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="datetime-id" class="control-label col-4">
                                            Field ID *
                                            <br><small>(Must be Unique)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="id" id="datetime-id" class="form-control" placeholder="title">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="datetime-placeholder" class="control-label col-4">
                                            Placeholder
                                            <br><small>(Sample Placeholder)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="placeholder" id="datetime-placeholder" class="form-control" placeholder="This is a title field">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group date-control row">
                                        <label for="datetime-initial-value" class="control-label col-4">
                                            Initial Value
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="initial-value" id="datetime-initial-value" class="form-control" placeholder="Optional Initial Value">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group timezone-control row">
                                        <label for="timezone-initial-value" class="control-label col-4">
                                            Initial Value
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="initial-value" id="timezone-initial-value" class="form-control">
                                                        <option value="UM12">(UTC -12:00) Baker/Howland Island</option>
                                                        <option value="UM11">(UTC -11:00) Samoa Time Zone, Niue</option>
                                                        <option value="UM10">(UTC -10:00) Hawaii-Aleutian Standard Time, Cook Islands, Tahiti</option>
                                                        <option value="UM95">(UTC -9:30) Marquesas Islands</option>
                                                        <option value="UM9">(UTC -9:00) Alaska Standard Time, Gambier Islands</option>
                                                        <option value="UM8">(UTC -8:00) Pacific Standard Time, Clipperton Island</option>
                                                        <option value="UM7">(UTC -7:00) Mountain Standard Time</option>
                                                        <option value="UM6">(UTC -6:00) Central Standard Time</option>
                                                        <option value="UM5">(UTC -5:00) Eastern Standard Time, Western Caribbean Standard Time</option>
                                                        <option value="UM45">(UTC -4:30) Venezuelan Standard Time</option>
                                                        <option value="UM4">(UTC -4:00) Atlantic Standard Time, Eastern Caribbean Standard Time</option>
                                                        <option value="UM35">(UTC -3:30) Newfoundland Standard Time</option>
                                                        <option value="UM3">(UTC -3:00) Argentina, Brazil, French Guiana, Uruguay</option>
                                                        <option value="UM2">(UTC -2:00) South Georgia/South Sandwich Islands</option>
                                                        <option value="UM1">(UTC -1:00) Azores, Cape Verde Islands</option>
                                                        <option value="UTC">(UTC) Greenwich Mean Time, Western European Time</option>
                                                        <option value="UP1">(UTC +1:00) Central European Time, West Africa Time</option>
                                                        <option value="UP2" selected="selected">(UTC +2:00) Central Africa Time, Eastern European Time, Kaliningrad Time</option>
                                                        <option value="UP3">(UTC +3:00) Moscow Time, East Africa Time</option>
                                                        <option value="UP35">(UTC +3:30) Iran Standard Time</option>
                                                        <option value="UP4">(UTC +4:00) Azerbaijan Standard Time, Samara Time</option>
                                                        <option value="UP45">(UTC +4:30) Afghanistan</option>
                                                        <option value="UP5">(UTC +5:00) Pakistan Standard Time, Yekaterinburg Time</option>
                                                        <option value="UP55">(UTC +5:30) Indian Standard Time, Sri Lanka Time</option>
                                                        <option value="UP575">(UTC +5:45) Nepal Time</option>
                                                        <option value="UP6">(UTC +6:00) Bangladesh Standard Time, Bhutan Time, Omsk Time</option>
                                                        <option value="UP65">(UTC +6:30) Cocos Islands, Myanmar</option>
                                                        <option value="UP7">(UTC +7:00) Krasnoyarsk Time, Cambodia, Laos, Thailand, Vietnam</option>
                                                        <option value="UP8">(UTC +8:00) Australian Western Standard Time, Beijing Time, Irkutsk Time</option>
                                                        <option value="UP875">(UTC +8:45) Australian Central Western Standard Time</option>
                                                        <option value="UP9">(UTC +9:00) Japan Standard Time, Korea Standard Time, Yakutsk Time</option>
                                                        <option value="UP95">(UTC +9:30) Australian Central Standard Time</option>
                                                        <option value="UP10">(UTC +10:00) Australian Eastern Standard Time, Vladivostok Time</option>
                                                        <option value="UP105">(UTC +10:30) Lord Howe Island</option>
                                                        <option value="UP11">(UTC +11:00) Magadan Time, Solomon Islands, Vanuatu</option>
                                                        <option value="UP115">(UTC +11:30) Norfolk Island</option>
                                                        <option value="UP12">(UTC +12:00) Fiji, Gilbert Islands, Kamchatka Time, New Zealand Standard Time</option>
                                                        <option value="UP1275">(UTC +12:45) Chatham Islands Standard Time</option>
                                                        <option value="UP13">(UTC +13:00) Phoenix Islands Time, Tonga</option>
                                                        <option value="UP14">(UTC +14:00) Line Islands</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group time-control row">
                                        <label for="datetime-format" class="control-label col-4">
                                            Format *
                                            <br><small>(minimum characters)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="format" id="datetime-format" class="form-control">
                                                        <option value="12">12 Hours</option>
                                                        <option value="24">24 Hours</option>
                                                    </select>
                                                <div>
                                            </div>
                                        </div>
                                    </li>
                                    <li id="datetime-type-container" class="form-group row">
                                        <label for="datetime-type" class="control-label col-4">
                                            Field Type *
                                            <br><small>(Select One)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="type" id="datetime-type" class="form-control">
                                                        <option value="time" selected>Time</option>
                                                        <option value="date">Date</option>
                                                        <option value="datetime">Date &amp; Time</option>
                                                        <option value="daterange">Date Range</option>
                                                        <option value="datetimerange">Date &amp; Time Range</option>
                                                        <option value="timezone">Timezone</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li id="datetime-db-type-container" class="form-group row">
                                        <label for="datetime-db-type" class="control-label col-4">
                                            Data Type *
                                            <br><small>(Select One)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="db-type" id="datetime-db-type" class="form-control">
                                                        <option class="time" value="time">Time</option>
                                                        <option class="date" value="date">Date</option>
                                                        <option class="datetime" value="datetime" selected>Datetime</option>
                                                        <option class="timezone" value="varchar">Varchar</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="datetime-min-length" class="control-label col-4">
                                            Min Length
                                            <br><small>(Minimum Characters)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="min-length" id="datetime-min-length" class="form-control" placeholder="2">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="datetime-max-length" class="control-label col-4">
                                            Max Length* <br>
                                            <small>(maximum characters)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="max-length" id="datetime-max-length" class="form-control" placeholder="1000" value="1000">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </fieldset>

                            <fieldset class="col-6">
                                <legend class="align-left">Column 2</legend>
                                <ul>
                                    <li class="form-group row">
                                        <label class="control-label col-4">
                                            Validations
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="datetime-trim" class="switch" checked="checked" value="trim">Trim</label>
                                                    </div>
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="datetime-required" class="switch" checked="checked" value="required">Required</label>
                                                    </div>
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="datetime-xss-clean" class="switch" checked="checked" value="xss_clean">XSS Clean</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="datetime-show-list" class="control-label col-4">
                                            Show on List
                                            <br><small>(Show on Tables)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="show-list" id="datetime-show-list" class="switch" checked="checked"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="datetime-searchable" class="control-label col-4">
                                            Searchable
                                            <br><small>(APIs and Tables)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="searchable" id="datetime-searchable" class="switch" checked="checked"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="datetime-show-api" class="control-label col-4">
                                            Show on API
                                            <br><small>(Show on API return values)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="show-api" id="datetime-show-api" class="switch" checked="checked"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="datetime-icon" class="control-label col-4">
                                            Icon *
                                            <br><small>(Use Icon - Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="icon" id="datetime-icon" class="form-control">
                                                        <option value="right" selected>Right</option>
                                                        <option value="left">Left</option>
                                                        <option value="both">Both</option>
                                                        <option value="none">None</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group icon-control row">
                                        <label for="datetime-change-icon" class="control-label col-4">
                                            Change Icon
                                            <br><small>(Fontawesome or Text - Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="change-icon" id="datetime-change-icon" class="form-control" placeholder="&lt;i class=&quot;fa fa-edit&quot;&gt;&lt;/i&gt; or $">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="datetime-guideline" class="control-label col-4">
                                            Guideline
                                            <br><small>(Add Guideline)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="guideline" id="datetime-guideline" class="form-control">
                                                        <option value="none">None</option>
                                                        <option value="input-above">Above Input</option>
                                                        <option value="label-tooltip" selected="selected">Label Tooltip</option>
                                                        <option value="input-tooltip">Input Tooltip</option>
                                                        <option value="label">Below Label</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li id="datetime-guideline-title-container" class="form-group guideline-control row">
                                        <label for="datetime-guideline-title" class="control-label col-4">
                                            Guideline Title *
                                            <br><small>(Guideline title for Tooltips)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="guideline-title" id="datetime-guideline-title" class="form-control" placeholder="Guideline">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group guideline-control row">
                                        <label for="datetime-guideline-text" class="control-label col-4">
                                            Guideline Text *
                                            <br><small>(Type Guideline)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <textarea name="guideline-text" id="datetime-guideline-text" class="form-control" placeholder="User Guideline"></textarea>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="datetime-horizontal-size" class="control-label col-4">
                                            Horizontal Size *
                                            <br><small>(Input Width)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="horizontal-size" id="datetime-horizontal-size" class="form-control">
                                                        <optgroup label="Static Sizing">
                                                            <option value="x-small">X-Small</option>
                                                            <option value="small">Small</option>
                                                            <option value="medium">Medium</option>
                                                            <option value="large">Large</option>
                                                            <option value="x-large">X-large</option>
                                                        </optgroup>
                                                        <optgroup label="Dynamic Sizing">
                                                            <option value="col-2">2 Columns</option>
                                                            <option value="col-3">3 Columns</option>
                                                            <option value="col-4">4 Columns</option>
                                                            <option value="col-5">5 Columns</option>
                                                            <option value="col-6">6 Columns</option>
                                                            <option value="col-7">7 Columns</option>
                                                            <option value="col-8">8 Columns</option>
                                                            <option value="col-9">9 Columns</option>
                                                            <option value="col-0">10 Columns</option>
                                                            <option value="col-11">11 Columns</option>
                                                            <option value="col-12" selected>12 Columns</option>
                                                        </optgroup>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="datetime-vertical-size" class="control-label col-4">
                                            Vertical Size *
                                            <br><small>(Input Height)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="vertical-size" id="datetime-vertical-size" class="form-control">
                                                        <option value="input-sm">Small</option>
                                                        <option value="" selected="selected">Medium</option>
                                                        <option value="input-lg">Large</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="datetime-position" class="control-label col-4">
                                            Position *
                                            <br><small>(Input Position)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="position" id="datetime-position" class="form-control">
                                                        <option value="pull-left" selected="selected">Left</option>
                                                        <option value="align-center">Center</option>
                                                        <option value="pull-right">Right</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </fieldset>
                        </form>
                    </div>
                    <div id="datetime-modal-footer" class="modal-footer">
                        <button type="button" id="datetime-cancel-btn" data-dismiss="modal" class="btn btn-default">Close</button>
                        <button type="button" id="datetime-save-btn" class="btn btn-primary">Create Text Input</button>
                    </div>
                </div>
                                        
                <!-- file upload -->
                <div id="fileupload-modal" class="modal container fade" tabindex="-1" style="display: none;">
                    <div id="fileupload-modal-header" class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 id="fileupload-modal-title" class="modal-title">File Upload Input</h4>
                    </div>
                    <div id="fileupload-modal-body" class="modal-body">
                        <div class="guideline bg-info">
                            <i class="icon-info-sign icon-large"></i> Fields marked with <code>*</code> are required.
                        </div>
                        <form id="fileupload-form" class="form-bordered form-horizontal form-column">
                            <fieldset class="col-6">
                                <legend class="align-left">Column 1</legend>
                                <ul>
                                    <li class="form-group row">
                                        <label for="fileupload-label" class="control-label col-4">
                                            Label *
                                            <br><small>(Input Label)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="label" id="fileupload-label" class="form-control">
                                                        <option value="left">Left</option>
                                                        <option value="right" selected="selected">Right</option>
                                                        <option value="center">Center</option>
                                                        <option value="none">None</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group label-control row">
                                        <label for="fileupload-bold-label" class="control-label col-4">
                                            Bold Label
                                            <br><small>(Make Labels Bold)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="bold-label" id="fileupload-bold-label" class="switch"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group label-control row">
                                        <label for="fileupload-label-text" class="control-label col-4">
                                            Label Text
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="label-text" id="fileupload-label-text" class="form-control" placeholder="Title">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="fileupload-name" class="control-label col-4">
                                            Field Name *
                                            <br><small>(No Spaces)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="name" id="fileupload-name" class="form-control" placeholder="title">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="fileupload-id" class="control-label col-4">
                                            Field ID *
                                            <br><small>(Must be Unique)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="id" id="fileupload-id" class="form-control" placeholder="title">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="fileupload-location" class="control-label col-4">
                                            Location *
                                            <br><small>(Upload Folder)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="location" id="fileupload-location" class="form-control" placeholder="uploads/images/folder_name" value="uploads/images/folder_name">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li id="fileupload-type-container" class="form-group row">
                                        <label for="fileupload-type" class="control-label col-4">
                                            Field Type *
                                            <br><small>(Select One)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="type" id="fileupload-type" class="form-control">
                                                        <option value="image" selected>Image Uploader</option>
<!--                                                        <option value="upload_url">URL or Image Uploader</option>-->
                                                        <option value="button">Button Uploader</option>
                                                        <option value="file">File Uploader</option>
                                                        <option value="multiple">Multiple Files Uploader</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group image-control label-control row">
                                        <label for="fileupload-resize" class="control-label col-4">
                                            Resize Image
                                            <br><small>(Resize Uploaded Images)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="resize" id="fileupload-resize" class="switch"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group image-control resize-control row">
                                        <label for="fileupload-width" class="control-label col-4">
                                            Width *
                                            <br><small>(Image Width)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="width" id="fileupload-width" class="form-control" placeholder="480">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group image-control resize-control row">
                                        <label for="fileupload-height" class="control-label col-4">
                                            Height *
                                            <br><small>(Image Width)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="height" id="fileupload-height" class="form-control" placeholder="320">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="fileupload-file-types" class="control-label col-4">
                                            File Types *
                                            <br><small>(Select One)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <input type="text" name="file-types" id="fileupload-file-types" class="form-control" placeholder="add file extension" value="jpg,gif,png">
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </fieldset>

                            <fieldset class="col-6">
                                <legend class="align-left">Column 2</legend>
                                <ul>
                                    <li class="form-group row">
                                        <label class="control-label col-4">
                                            Validations
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="fileupload-trim" class="switch" checked="checked" value="trim">Trim</label>
                                                    </div>
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="fileupload-required" class="switch" checked="checked" value="required">Required</label>
                                                    </div>
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="fileupload-xss-clean" class="switch" checked="checked" value="xss_clean">XSS Clean</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="fileupload-show-list" class="control-label col-4">
                                            Show on List
                                            <br><small>(Show on Tables)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="show-list" id="fileupload-show-list" class="switch" checked="checked"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="fileupload-show-api" class="control-label col-4">
                                            Show on API
                                            <br><small>(Show on API return values)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="show-api" id="fileupload-show-api" class="switch" checked="checked"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="fileupload-guideline" class="control-label col-4">
                                            Guideline
                                            <br><small>(Add Guideline)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="guideline" id="fileupload-guideline" class="form-control">
                                                        <option value="none">None</option>
                                                        <option value="input-above">Above Input</option>
                                                        <option value="input-tooltip">Input Tooltip</option>
                                                        <option value="label-tooltip" selected="selected">Label Tooltip</option>
                                                        <option value="label">Below Label</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li id="fileupload-guideline-title-container" class="form-group guideline-control row">
                                        <label for="fileupload-guideline-title" class="control-label col-4">
                                            Guideline Title *
                                            <br><small>(Guideline title for Tooltips)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="guideline-title" id="fileupload-guideline-title" class="form-control" placeholder="Guideline">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group guideline-control row">
                                        <label for="fileupload-guideline-text" class="control-label col-4">
                                            Guideline Text *
                                            <br><small>(Type Guideline)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <textarea name="guideline-text" id="fileupload-guideline-text" class="form-control" placeholder="User Guideline"></textarea>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="fileupload-horizontal-size" class="control-label col-4">
                                            Horizontal Size *
                                            <br><small>(Input Width)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="horizontal-size" id="fileupload-horizontal-size" class="form-control">
                                                        <optgroup label="Static Sizing">
                                                            <option value="x-small">X-Small</option>
                                                            <option value="small">Small</option>
                                                            <option value="medium">Medium</option>
                                                            <option value="large">Large</option>
                                                            <option value="x-large">X-large</option>
                                                        </optgroup>
                                                        <optgroup label="Dynamic Sizing">
                                                            <option value="col-2">2 Columns</option>
                                                            <option value="col-3">3 Columns</option>
                                                            <option value="col-4">4 Columns</option>
                                                            <option value="col-5">5 Columns</option>
                                                            <option value="col-6">6 Columns</option>
                                                            <option value="col-7">7 Columns</option>
                                                            <option value="col-8">8 Columns</option>
                                                            <option value="col-9">9 Columns</option>
                                                            <option value="col-0">10 Columns</option>
                                                            <option value="col-11">11 Columns</option>
                                                            <option value="col-12" selected>12 Columns</option>
                                                        </optgroup>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="fileupload-vertical-size" class="control-label col-4">
                                            Vertical Size *
                                            <br><small>(Input Height)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="vertical-size" id="fileupload-vertical-size" class="form-control">
                                                        <option value="input-sm">Small</option>
                                                        <option value="" selected="selected">Medium</option>
                                                        <option value="input-lg">Large</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="fileupload-position" class="control-label col-4">
                                            Position *
                                            <br><small>(Input Position)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="position" id="fileupload-position" class="form-control">
                                                        <option value="pull-left" selected="selected">Left</option>
                                                        <option value="align-center">Center</option>
                                                        <option value="pull-right">Right</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </fieldset>
                        </form>
                    </div>
                    <div id="fileupload-modal-footer" class="modal-footer">
                        <button type="button" id="fileupload-cancel-btn" data-dismiss="modal" class="btn btn-default">Close</button>
                        <button type="button" id="fileupload-save-btn" class="btn btn-primary">Create File Upload Input</button>
                    </div>
                </div>
                
                <!-- color input -->
                <div id="color-modal" class="modal container fade" tabindex="-1" style="display: none;">
                    <div id="color-modal-header" class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 id="color-modal-title" class="modal-title">Color Input</h4>
                    </div>
                    <div id="color-modal-body" class="modal-body">
                        <div class="guideline bg-info">
                            <i class="icon-info-sign icon-large"></i> Fields marked with <code>*</code> are required.
                        </div>
                        <form id="color-form" class="form-bordered form-horizontal form-column">
                            <fieldset class="col-6">
                                <legend class="align-left">Column 1</legend>
                                <ul>
                                    <li class="form-group row">
                                        <label for="color-label" class="control-label col-4">
                                            Label *
                                            <br><small>(Input Label)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="label" id="color-label" class="form-control">
                                                        <option value="left">Left</option>
                                                        <option value="right" selected="selected">Right</option>
                                                        <option value="center">Center</option>
                                                        <option value="none">None</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group label-control row">
                                        <label for="color-bold-label" class="control-label col-4">
                                            Bold Label
                                            <br><small>(Make Labels Bold)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="bold-label" id="color-bold-label" class="switch" ></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group label-control row">
                                        <label for="color-label-text" class="control-label col-4">
                                            Label Text
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="label-text" id="color-label-text" class="form-control" placeholder="Title">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="color-name" class="control-label col-4">
                                            Field Name *
                                            <br><small>(No Spaces)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="name" id="color-name" class="form-control" placeholder="title">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="color-id" class="control-label col-4">
                                            Field ID *
                                            <br><small>(Must be Unique)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="id" id="color-id" class="form-control" placeholder="title">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="color-placeholder" class="control-label col-4">
                                            Placeholder
                                            <br><small>(Sample Placeholder)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="placeholder" id="color-placeholder" class="form-control" placeholder="This is a title field">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="color-initial-value" class="control-label col-4">
                                            Initial Value
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-tint"></i></span>
                                                    <input type="text" name="initial-value" id="color-initial-value" class="form-control" placeholder="Optional Initial Value">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="color-format" class="control-label col-4">
                                            Format *
                                            <br><small>(Select One)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="format" id="color-format" class="form-control">
                                                        <option class="text" value="hex">Hex - #ffffff</option>
                                                        <option class="text" value="rgb">RGB - rgb(255,255,255)</option>
                                                        <option class="text" value="rgba">RGBA - rgba(255,255,255,0.50)</option>
                                                        <option class="text" value="hsl">HSL - hsl(255,57%,35%)</option>
                                                        <option class="text" value="hsla">HSLA - hsla(255,57%,35%,0.50)</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </fieldset>

                            <fieldset class="col-6">
                                <legend class="align-left">Column 2</legend>
                                <ul>
                                    <li class="form-group row">
                                        <label class="control-label col-4">
                                            Validations
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="color-trim" class="switch" checked="checked" value="trim">Trim</label>
                                                    </div>
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="color-required" class="switch" checked="checked" value="required">Required</label>
                                                    </div>
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="color-xss-clean" class="switch" checked="checked" value="xss_clean">XSS Clean</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="color-show-list" class="control-label col-4">
                                            Show on List
                                            <br><small>(Show on Tables)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="show-list" id="color-show-list" class="switch" checked="checked"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="color-searchable" class="control-label col-4">
                                            Searchable
                                            <br><small>(APIs and Tables)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="searchable" id="color-searchable" class="switch" checked="checked"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="color-show-api" class="control-label col-4">
                                            Show on API
                                            <br><small>(Show on API return values)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="show-api" id="color-show-api" class="switch" checked="checked"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="color-icon" class="control-label col-4">
                                            Icon *
                                            <br><small>(Use Icon - Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="icon" id="color-icon" class="form-control">
                                                        <option value="right">Right</option>
                                                        <option value="left" selected="selected">Left</option>
                                                        <option value="both">Both</option>
                                                        <option value="none">None</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group icon-control row">
                                        <label for="color-change-icon" class="control-label col-4">
                                            Change Icon
                                            <br><small>(Fontawesome or Text - Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="change-icon" id="color-change-icon" class="form-control" placeholder="&lt;i class=&quot;fa fa-edit&quot;&gt;&lt;/i&gt; or $">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="color-guideline" class="control-label col-4">
                                            Guideline
                                            <br><small>(Add Guideline)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="guideline" id="color-guideline" class="form-control">
                                                        <option value="none">None</option>
                                                        <option value="input-above">Above Input</option>
                                                        <option value="input-tooltip">Input Tooltip</option>
                                                        <option value="label-tooltip" selected="selected">Label Tooltip</option>
                                                        <option value="label">Below Label</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li id="color-guideline-title-container" class="form-group guideline-control row">
                                        <label for="color-guideline-title" class="control-label col-4">
                                            Guideline Title *
                                            <br><small>(Guideline title for Tooltips)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="guideline-title" id="color-guideline-title" class="form-control" placeholder="Guideline">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group guideline-control row">
                                        <label for="color-guideline-text" class="control-label col-4">
                                            Guideline Text *
                                            <br><small>(Type Guideline)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <textarea name="guideline-text" id="color-guideline-text" class="form-control" placeholder="User Guideline"></textarea>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="color-horizontal-size" class="control-label col-4">
                                            Horizontal Size *
                                            <br><small>(Input Width)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="horizontal-size" id="color-horizontal-size" class="form-control">
                                                        <optgroup label="Static Sizing">
                                                            <option value="x-small">X-Small</option>
                                                            <option value="small">Small</option>
                                                            <option value="medium">Medium</option>
                                                            <option value="large">Large</option>
                                                            <option value="x-large">X-large</option>
                                                        </optgroup>
                                                        <optgroup label="Dynamic Sizing">
                                                            <option value="col-2">2 Columns</option>
                                                            <option value="col-3">3 Columns</option>
                                                            <option value="col-4">4 Columns</option>
                                                            <option value="col-5">5 Columns</option>
                                                            <option value="col-6">6 Columns</option>
                                                            <option value="col-7">7 Columns</option>
                                                            <option value="col-8">8 Columns</option>
                                                            <option value="col-9">9 Columns</option>
                                                            <option value="col-0">10 Columns</option>
                                                            <option value="col-11">11 Columns</option>
                                                            <option value="col-12" selected>12 Columns</option>
                                                        </optgroup>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="color-vertical-size" class="control-label col-4">
                                            Vertical Size *
                                            <br><small>(Input Height)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="vertical-size" id="color-vertical-size" class="form-control">
                                                        <option value="input-sm">Small</option>
                                                        <option value="" selected="selected">Medium</option>
                                                        <option value="input-lg">Large</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="color-position" class="control-label col-4">
                                            Position *
                                            <br><small>(Input Position)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="position" id="color-position" class="form-control">
                                                        <option value="pull-left" selected="selected">Left</option>
                                                        <option value="align-center">Center</option>
                                                        <option value="pull-right">Right</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                </ul>
                            </fieldset>
                        </form>
                    </div>
                    <div id="color-modal-footer" class="modal-footer">
                        <button type="button" id="color-cancel-btn" data-dismiss="modal" class="btn btn-default">Close</button>
                        <button type="button" id="color-save-btn" class="btn btn-primary">Create Color Input</button>
                    </div>
                </div>
                
                <!-- toggle input -->
                <div id="toggle-modal" class="modal container fade" tabindex="-1" style="display: none;">
                    <div id="toggle-modal-header" class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 id="toggle-modal-title" class="modal-title">Toggle Input</h4>
                    </div>
                    <div id="toggle-modal-body" class="modal-body">
                        <div class="guideline bg-info">
                            <i class="icon-info-sign icon-large"></i> Fields marked with <code>*</code> are required.
                        </div>
                        <form id="toggle-form" class="form-bordered form-horizontal form-column">
                            <fieldset class="col-6">
                                <legend class="align-left">Column 1</legend>
                                <ul>
                                    <li class="form-group row">
                                        <label for="toggle-label" class="control-label col-4">
                                            Label *
                                            <br><small>(Input Label)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="label" id="toggle-label" class="form-control">
                                                        <option value="left">Left</option>
                                                        <option value="right" selected="selected">Right</option>
                                                        <option value="center">Center</option>
                                                        <option value="none">None</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group label-control row">
                                        <label for="toggle-bold-label" class="control-label col-4">
                                            Bold Label
                                            <br><small>(Make Labels Bold)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="bold-label" id="toggle-bold-label" class="switch" ></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group label-control row">
                                        <label for="toggle-label-text" class="control-label col-4">
                                            Label Text *
                                            <br><small>(Label Text)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="label-text" id="toggle-label-text" class="form-control" placeholder="Title">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="toggle-name" class="control-label col-4">
                                            Field Name *
                                            <br><small>(No Spaces)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="name" id="toggle-name" class="form-control" placeholder="title">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="toggle-id" class="control-label col-4">
                                            Field ID *
                                            <br><small>(Must be Unique)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="id" id="toggle-id" class="form-control" placeholder="title">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="toggle-initial-value" class="control-label col-4">
                                            Initial Value
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-tint"></i></span>
                                                    <input type="text" name="initial-value" id="toggle-initial-value" class="form-control" placeholder="Optional Initial Value">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="toggle-switch" class="control-label col-4">
                                            Switch
                                            <br><small>(Check to Use Switch)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <input type="checkbox" name="switch" id="toggle-switch" class="switch">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group switch-control row">
                                        <label for="toggle-on-text" class="control-label col-4">
                                            On Text *
                                            <br><small>(ON Text)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="on-text" id="toggle-on-text" class="form-control" placeholder="ON" value="ON">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group switch-control row">
                                        <label for="toggle-off-text" class="control-label col-4">
                                            Off Text *
                                            <br><small>(OFF Text)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="off-text" id="toggle-off-text" class="form-control" placeholder="OFF" value="OFF">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
<!--                                    <li id="toggle-db-type-container" class="form-group row">
                                        <label for="toggle-db-type" class="control-label col-4">
                                            Data Type *
                                            <br><small>(Select One)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="db-type" id="toggle-db-type" class="form-control">
                                                        <option class="text" value="varchar" selected="selected">Varchar</option>
                                                        <option class="text" value="tinyint">Tiny Int</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>-->
                                </ul>
                            </fieldset>

                            <fieldset class="col-6">
                                <legend class="align-left">Column 2</legend>
                                <ul>
                                    <li class="form-group row">
                                        <label class="control-label col-4">
                                            Validations
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="toggle-trim" class="switch" checked="checked" value="trim">Trim</label>
                                                    </div>
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="toggle-xss-clean" class="switch" checked="checked" value="xss_clean">XSS Clean</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="toggle-show-list" class="control-label col-4">
                                            Show on List
                                            <br><small>(Show on Tables)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="show-list" id="toggle-show-list" class="switch" checked="checked"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="toggle-searchable" class="control-label col-4">
                                            Searchable
                                            <br><small>(APIs and Tables)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="searchable" id="toggle-searchable" class="switch" checked="checked"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="toggle-show-api" class="control-label col-4">
                                            Show on API
                                            <br><small>(Show on API return values)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="show-api" id="toggle-show-api" class="switch" checked="checked"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="toggle-guideline" class="control-label col-4">
                                            Guideline
                                            <br><small>(Add Guideline)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="guideline" id="toggle-guideline" class="form-control">
                                                        <option value="none">None</option>
                                                        <option value="input-above">Above Input</option>
                                                        <option value="input-tooltip">Input Tooltip</option>
                                                        <option value="label-tooltip" selected="selected">Label Tooltip</option>
                                                        <option value="label">Below Label</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li id="toggle-guideline-title-container" class="form-group guideline-control row">
                                        <label for="toggle-guideline-title" class="control-label col-4">
                                            Guideline Title *
                                            <br><small>(Guideline title for Tooltips)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="guideline-title" id="toggle-guideline-title" class="form-control" placeholder="Guideline">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group guideline-control row">
                                        <label for="toggle-guideline-text" class="control-label col-4">
                                            Guideline Text *
                                            <br><small>(Type Guideline)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <textarea name="guideline-text" id="toggle-guideline-text" class="form-control" placeholder="User Guideline"></textarea>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="toggle-horizontal-size" class="control-label col-4">
                                            Horizontal Size *
                                            <br><small>(Input Width)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="horizontal-size" id="toggle-horizontal-size" class="form-control">
                                                        <optgroup label="Static Sizing">
                                                            <option value="x-small">X-Small</option>
                                                            <option value="small">Small</option>
                                                            <option value="medium">Medium</option>
                                                            <option value="large">Large</option>
                                                            <option value="x-large">X-large</option>
                                                        </optgroup>
                                                        <optgroup label="Dynamic Sizing">
                                                            <option value="col-2">2 Columns</option>
                                                            <option value="col-3">3 Columns</option>
                                                            <option value="col-4">4 Columns</option>
                                                            <option value="col-5">5 Columns</option>
                                                            <option value="col-6">6 Columns</option>
                                                            <option value="col-7">7 Columns</option>
                                                            <option value="col-8">8 Columns</option>
                                                            <option value="col-9">9 Columns</option>
                                                            <option value="col-0">10 Columns</option>
                                                            <option value="col-11">11 Columns</option>
                                                            <option value="col-12" selected>12 Columns</option>
                                                        </optgroup>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="toggle-vertical-size" class="control-label col-4">
                                            Vertical Size *
                                            <br><small>(Input Height)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="vertical-size" id="toggle-vertical-size" class="form-control">
                                                        <option value="input-sm">Small</option>
                                                        <option value="" selected="selected">Medium</option>
                                                        <option value="input-lg">Large</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="toggle-position" class="control-label col-4">
                                            Position *
                                            <br><small>(Input Position)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="position" id="toggle-position" class="form-control">
                                                        <option value="pull-left" selected="selected">Left</option>
                                                        <option value="align-center">Center</option>
                                                        <option value="pull-right">Right</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </fieldset>
                        </form>
                    </div>
                    <div id="toggle-modal-footer" class="modal-footer">
                        <button type="button" id="toggle-cancel-btn" data-dismiss="modal" class="btn btn-default">Close</button>
                        <button type="button" id="toggle-save-btn" class="btn btn-primary">Create Toggle Input</button>
                    </div>
                </div>

                <!-- geolocation input -->
                <div id="geolocation-modal" class="modal container fade" tabindex="-1" style="display: none;">
                    <div id="geolocation-modal-header" class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 id="geolocation-modal-title" class="modal-title">Geolocation</h4>
                    </div>
                    <div id="geolocation-modal-body" class="modal-body">
                        <div class="guideline bg-info">
                            <i class="icon-info-sign icon-large"></i> Fields marked with <code>*</code> are required.
                        </div>
                        <form id="geolocation-form" class="form-bordered form-horizontal form-column">
                            <fieldset class="col-6">
                                <legend class="align-left">Column 1</legend>
                                <ul>
                                    <li class="form-group row">
                                        <label for="geolocation-label" class="control-label col-4">
                                            Label *
                                            <br><small>(Input Label)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="label" id="geolocation-label" class="form-control">
                                                        <option value="left">Left</option>
                                                        <option value="right" selected="selected">Right</option>
                                                        <option value="center">Center</option>
                                                        <option value="none">None</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group label-control row">
                                        <label for="geolocation-bold-label" class="control-label col-4">
                                            Bold Label
                                            <br><small>(Make Labels Bold)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="bold-label" id="geolocation-bold-label" class="switch" ></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group label-control row">
                                        <label for="geolocation-label-text" class="control-label col-4">
                                            Label Text
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="label-text" id="geolocation-label-text" class="form-control" placeholder="Geolocation">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="geolocation-name" class="control-label col-4">
                                            Field Name *
                                            <br><small>(No Spaces)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="name" id="geolocation-name" class="form-control" placeholder="geolocation">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="geolocation-id" class="control-label col-4">
                                            Field ID *
                                            <br><small>(Must be Unique)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="id" id="geolocation-id" class="form-control" placeholder="geolocation">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="geolocation-placeholder" class="control-label col-4">
                                            Placeholder
                                            <br><small>(Sample Placeholder)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="placeholder" id="geolocation-placeholder" class="form-control" placeholder="Address">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="geolocation-initial-value" class="control-label col-4">
                                            Initial Value
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-tint"></i></span>
                                                    <input type="text" name="initial-value" id="geolocation-initial-value" class="form-control" placeholder="Optional Initial Value">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="geolocation-initial-longitude" class="control-label col-4">
                                            Initial Longitude *
                                            <br><small>(Longitude Value)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-map-marker"></i></span>
                                                    <input type="text" name="initial-longitude" id="geolocation-initial-longitude" class="form-control" placeholder="120.61758366806225" value="120.61758366806225">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="geolocation-initial-latitude" class="control-label col-4">
                                            Initial Latitude *
                                            <br><small>(Longitude Value)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-map-marker"></i></span>
                                                    <input type="text" name="initial-latitude" id="geolocation-initial-latitude" class="form-control" placeholder="16.413640135538014" value="16.413640135538014">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="geolocation-min-length" class="control-label col-4">
                                            Min Length
                                            <br><small>(Minimum Characters)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="min-length" id="geolocation-min-length" class="form-control" placeholder="2">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="geolocation-max-length" class="control-label col-4">
                                            Max Length *
                                            <br><small>(Maximum Characters)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="max-length" id="geolocation-max-length" class="form-control" placeholder="1000" value="1000">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </fieldset>

                            <fieldset class="col-6">
                                <legend class="align-left">Column 2</legend>
                                <ul>
                                    <li class="form-group row">
                                        <label class="control-label col-4">
                                            Validations
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="geolocation-trim" class="switch" checked="checked" value="trim">Trim</label>
                                                    </div>
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="geolocation-required" class="switch" checked="checked" value="required">Required</label>
                                                    </div>
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="geolocation-xss-clean" class="switch" checked="checked" value="xss_clean">XSS Clean</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="geolocation-show-list" class="control-label col-4">
                                            Show on List
                                            <br><small>(Show on Tables)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="show-list" id="geolocation-show-list" class="switch" checked="checked"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="geolocation-searchable" class="control-label col-4">
                                            Searchable
                                            <br><small>(APIs and Tables)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="searchable" id="geolocation-searchable" class="switch" checked="checked"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="geolocation-show-api" class="control-label col-4">
                                            Show on API
                                            <br><small>(Show on API return values)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="show-api" id="geolocation-show-api" class="switch" checked="checked"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="geolocation-icon" class="control-label col-4">
                                            Geolocation Icon *
                                            <br><small>(Use Icon)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="geolocation-icon" id="geolocation-icon" class="form-control">
                                                        <option value="right">Right</option>
                                                        <option value="left" selected="selected">Left</option>
                                                        <option value="both">Both</option>
                                                        <option value="none">None</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group geolocation-icon-control row">
                                        <label for="geolocation-change-icon" class="control-label col-4">
                                            Change Geolocation Icon
                                            <br><small>(Fontawesome or Text)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="geolocation-change-icon" id="geolocation-change-icon" class="form-control" placeholder="&lt;i class=&quot;fa fa-edit&quot;&gt;&lt;/i&gt; or $">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="longitude-icon" class="control-label col-4">
                                            Longitude Icon *
                                            <br><small>(Use Icon)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="longitude-icon" id="longitude-icon" class="form-control">
                                                        <option value="right">Right</option>
                                                        <option value="left" selected="selected">Left</option>
                                                        <option value="both">Both</option>
                                                        <option value="none">None</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group longitude-icon-control row">
                                        <label for="longitude-change-icon" class="control-label col-4">
                                            Change Longitude Icon
                                            <br><small>(Fontawesome or Text)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="longitude-change-icon" id="longitude-change-icon" class="form-control" placeholder="&lt;i class=&quot;fa fa-edit&quot;&gt;&lt;/i&gt; or $">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="latitude-icon" class="control-label col-4">
                                            Latitude Icon *
                                            <br><small>(Use Icon)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="latitude-icon" id="latitude-icon" class="form-control">
                                                        <option value="right">Right</option>
                                                        <option value="left" selected="selected">Left</option>
                                                        <option value="both">Both</option>
                                                        <option value="none">None</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group latitude-icon-control row">
                                        <label for="latitude-change-icon" class="control-label col-4">
                                            Change Latitude Icon
                                            <br><small>(Fontawesome or Text)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="latitude-change-icon" id="latitude-change-icon" class="form-control" placeholder="&lt;i class=&quot;fa fa-edit&quot;&gt;&lt;/i&gt; or $">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="geolocation-guideline" class="control-label col-4">
                                            Guideline
                                            <br><small>(Add Guideline)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="guideline" id="geolocation-guideline" class="form-control">
                                                        <option value="none" selected="selected">None</option>
                                                        <option value="input-above">Above Input</option>
                                                        <option value="input-tooltip">Input Tooltip</option>
                                                        <option value="label-tooltip">Label Tooltip</option>
                                                        <option value="label">Below Label</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li id="geolocation-guideline-title-container" class="form-group guideline-control row">
                                        <label for="geolocation-guideline-title" class="control-label col-4">
                                            Guideline Title *
                                            <br><small>(Guideline title for Tooltips)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="guideline-title" id="geolocation-guideline-title" class="form-control" placeholder="Guideline">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group guideline-control row">
                                        <label for="geolocation-guideline-text" class="control-label col-4">
                                            Guideline Text *
                                            <br><small>(Type Guideline)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <textarea name="guideline-text" id="geolocation-guideline-text" class="form-control" placeholder="User Guideline"></textarea>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="geolocation-horizontal-size" class="control-label col-4">
                                            Horizontal Size *
                                            <br><small>(Input Width)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="horizontal-size" id="geolocation-horizontal-size" class="form-control">
                                                        <optgroup label="Static Sizing">
                                                            <option value="x-small">X-Small</option>
                                                            <option value="small">Small</option>
                                                            <option value="medium">Medium</option>
                                                            <option value="large">Large</option>
                                                            <option value="x-large">X-large</option>
                                                        </optgroup>
                                                        <optgroup label="Dynamic Sizing">
                                                            <option value="col-2">2 Columns</option>
                                                            <option value="col-3">3 Columns</option>
                                                            <option value="col-4">4 Columns</option>
                                                            <option value="col-5">5 Columns</option>
                                                            <option value="col-6">6 Columns</option>
                                                            <option value="col-7">7 Columns</option>
                                                            <option value="col-8">8 Columns</option>
                                                            <option value="col-9">9 Columns</option>
                                                            <option value="col-0">10 Columns</option>
                                                            <option value="col-11">11 Columns</option>
                                                            <option value="col-12" selected>12 Columns</option>
                                                        </optgroup>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="geolocation-vertical-size" class="control-label col-4">
                                            Vertical Size *
                                            <br><small>(Input Height)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="vertical-size" id="geolocation-vertical-size" class="form-control">
                                                        <option value="input-sm">Small</option>
                                                        <option value="" selected="selected">Medium</option>
                                                        <option value="input-lg">Large</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="geolocation-position" class="control-label col-4">
                                            Position *
                                            <br><small>(Input Position)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="position" id="geolocation-position" class="form-control">
                                                        <option value="pull-left" selected="selected">Left</option>
                                                        <option value="align-center">Center</option>
                                                        <option value="pull-right">Right</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                </ul>
                            </fieldset>
                        </form>
                    </div>
                    <div id="geolocation-modal-footer" class="modal-footer">
                        <button type="button" id="geolocation-cancel-btn" data-dismiss="modal" class="btn btn-default">Close</button>
                        <button type="button" id="geolocation-save-btn" class="btn btn-primary">Create Geolocation Input</button>
                    </div>
                </div>
                
                <!-- captcha -->
                <div id="captcha-modal" class="modal container fade" tabindex="-1" style="display: none;">
                    <div id="captcha-modal-header" class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 id="captcha-modal-title" class="modal-title">Captcha</h4>
                    </div>
                    <div id="captcha-modal-body" class="modal-body">
                        <div class="guideline bg-info">
                            <i class="icon-info-sign icon-large"></i> Fields marked with <code>*</code> are required.
                        </div>
                        <form id="captcha-form" class="form-bordered form-horizontal form-column">
                            <fieldset class="col-6">
                                <legend class="align-left">Column 1</legend>
                                <ul>
                                    <li class="form-group row">
                                        <label for="captcha-label" class="control-label col-4">
                                            Label *
                                            <br><small>(Input Label)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="label" id="captcha-label" class="form-control">
                                                        <option value="left">Left</option>
                                                        <option value="right" selected="selected">Right</option>
                                                        <option value="center">Center</option>
                                                        <option value="none">None</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group label-control row">
                                        <label for="captcha-bold-label" class="control-label col-4">
                                            Bold Label
                                            <br><small>(Make Labels Bold)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="bold-label" id="captcha-bold-label" class="switch" >Bold Label</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group label-control row">
                                        <label for="captcha-label-text" class="control-label col-4">
                                            Label Text
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="label-text" id="captcha-label-text" class="form-control" placeholder="Captcha">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="captcha-name" class="control-label col-4">
                                            Field Name *
                                            <br><small>(No Spaces)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="name" id="captcha-name" class="form-control" placeholder="captcha">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="captcha-id" class="control-label col-4">
                                            Field ID *
                                            <br><small>(Must be Unique)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="id" id="captcha-id" class="form-control" placeholder="captcha">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="captcha-placeholder" class="control-label col-4">
                                            Placeholder
                                            <br><small>(Sample Placeholder)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="placeholder" id="captcha-placeholder" class="form-control" placeholder="Type the Image You See Above" value="Type the Image You See Above">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="captcha-length" class="control-label col-4">
                                            Captcha Length
                                            <br><small>(Number of Characters)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-tint"></i></span>
                                                    <input type="text" name="length" id="captcha-length" class="form-control" placeholder="6" value="6">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="captcha-path" class="control-label col-4">
                                            Folder Path *
                                            <br><small>(Upload Folder)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="path" id="captcha-path" class="form-control" placeholder="uploads/images/captchas" value="uploads/images/captchas">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="captcha-expiration" class="control-label col-4">
                                            Expiration
                                            <br><small>(Seconds)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-tint"></i></span>
                                                    <input type="text" name="expiration" id="captcha-expiration" class="form-control" placeholder="900" value="900">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="captcha-width" class="control-label col-4">
                                            Width *
                                            <br><small>(Captcha Image Width)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-tint"></i></span>
                                                    <input type="text" name="width" id="captcha-width" class="form-control" placeholder="300" value="300">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="captcha-height" class="control-label col-4">
                                            Height *
                                            <br><small>(Captcha Image Height)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-tint"></i></span>
                                                    <input type="text" name="height" id="captcha-height" class="form-control" placeholder="100" value="100">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </fieldset>

                            <fieldset class="col-6">
                                <legend class="align-left">Column 2</legend>
                                <ul>
                                    <li class="form-group row">
                                        <label class="control-label col-4">
                                            Validations
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="captcha-trim" class="switch" checked="checked" value="trim">Trim</label>
                                                    </div>
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="captcha-xss-clean" class="switch" checked="checked" value="xss_clean">XSS Clean</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="captcha-icon" class="control-label col-4">
                                            Icon *
                                            <br><small>(Use Icon - Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="icon" id="captcha-icon" class="form-control">
                                                        <option value="right" selected>Right</option>
                                                        <option value="left">Left</option>
                                                        <option value="both">Both</option>
                                                        <option value="none">None</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group icon-control row">
                                        <label for="captcha-change-icon" class="control-label col-4">
                                            Change Icon
                                            <br><small>(Fontawesome or Text - Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="change-icon" id="captcha-change-icon" class="form-control" placeholder="&lt;i class=&quot;fa fa-edit&quot;&gt;&lt;/i&gt; or $">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="captcha-guideline" class="control-label col-4">
                                            Guideline
                                            <br><small>(Add Guideline)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="guideline" id="captcha-guideline" class="form-control">
                                                        <option value="none" selected="selected">None</option>
                                                        <option value="input-above">Above Input</option>
                                                        <option value="input-tooltip">Input Tooltip</option>
                                                        <option value="label-tooltip">Label Tooltip</option>
                                                        <option value="label">Below Label</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li id="captcha-guideline-title-container" class="form-group guideline-control row">
                                        <label for="captcha-guideline-title" class="control-label col-4">
                                            Guideline Title *
                                            <br><small>(Guideline title for Tooltips)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="guideline-title" id="captcha-guideline-title" class="form-control" placeholder="Guideline">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group guideline-control row">
                                        <label for="captcha-guideline-text" class="control-label col-4">
                                            Guideline Text *
                                            <br><small>(Type Guideline)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <textarea name="guideline-text" id="captcha-guideline-text" class="form-control" placeholder="User Guideline"></textarea>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="captcha-horizontal-size" class="control-label col-4">
                                            Horizontal Size *
                                            <br><small>(Input Width)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="horizontal-size" id="captcha-horizontal-size" class="form-control">
                                                        <optgroup label="Static Sizing">
                                                            <option value="x-small">X-Small</option>
                                                            <option value="small">Small</option>
                                                            <option value="medium">Medium</option>
                                                            <option value="large">Large</option>
                                                            <option value="x-large">X-large</option>
                                                        </optgroup>
                                                        <optgroup label="Dynamic Sizing">
                                                            <option value="col-2">2 Columns</option>
                                                            <option value="col-3">3 Columns</option>
                                                            <option value="col-4">4 Columns</option>
                                                            <option value="col-5">5 Columns</option>
                                                            <option value="col-6">6 Columns</option>
                                                            <option value="col-7">7 Columns</option>
                                                            <option value="col-8">8 Columns</option>
                                                            <option value="col-9">9 Columns</option>
                                                            <option value="col-0">10 Columns</option>
                                                            <option value="col-11">11 Columns</option>
                                                            <option value="col-12" selected>12 Columns</option>
                                                        </optgroup>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="captcha-vertical-size" class="control-label col-4">
                                            Vertical Size *
                                            <br><small>(Input Height)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="vertical-size" id="captcha-vertical-size" class="form-control">
                                                        <option value="input-sm">Small</option>
                                                        <option value="" selected="selected">Medium</option>
                                                        <option value="input-lg">Large</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="captcha-position" class="control-label col-4">
                                            Position *
                                            <br><small>(Input Position)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="position" id="captcha-position" class="form-control">
                                                        <option value="pull-left" selected="selected">Left</option>
                                                        <option value="align-center">Center</option>
                                                        <option value="pull-right">Right</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                </ul>
                            </fieldset>
                        </form>
                    </div>
                    <div id="captcha-modal-footer" class="modal-footer">
                        <button type="button" id="captcha-cancel-btn" data-dismiss="modal" class="btn btn-default">Close</button>
                        <button type="button" id="captcha-save-btn" class="btn btn-primary">Create Captcha</button>
                    </div>
                </div>
                
                <!-- single input -->
                <div id="single-modal" class="modal container fade" tabindex="-1" style="display: none;">
                    <div id="single-modal-header" class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 id="single-modal-title" class="modal-title">Dropdown Input</h4>
                    </div>
                    <div id="single-modal-body" class="modal-body">
                        <div class="guideline bg-info">
                            <i class="icon-info-sign icon-large"></i> Fields marked with <code>*</code> are required.
                        </div>
                        <form id="single-form" class="form-bordered form-horizontal form-column">
                            <fieldset class="col-6">
                                <legend class="align-left">Column 1</legend>
                                <ul>
                                    <li class="form-group row">
                                        <label for="single-label" class="control-label col-4">
                                            Label *
                                            <br><small>(Input Label)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="label" id="single-label" class="form-control">
                                                        <option value="left">Left</option>
                                                        <option value="right" selected="selected">Right</option>
                                                        <option value="center">Center</option>
                                                        <option value="none">None</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group label-control row">
                                        <label for="single-bold-label" class="control-label col-4">
                                            Bold Label
                                            <br><small>(Make Labels Bold)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="bold-label" id="single-bold-label" class="switch" >Bold Label</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group label-control row">
                                        <label for="single-label-text" class="control-label col-4">
                                            Label Text
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="label-text" id="single-label-text" class="form-control" placeholder="Dropdown">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="single-name" class="control-label col-4">
                                            Field Name *
                                            <br><small>(No Spaces)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="name" id="single-name" class="form-control" placeholder="dropdown">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="single-id" class="control-label col-4">
                                            Field ID *
                                            <br><small>(Must be Unique)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="id" id="single-id" class="form-control" placeholder="dropdown">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group dropdown-control row">
                                        <label for="single-placeholder" class="control-label col-4">
                                            Placeholder
                                            <br><small>(Sample Placeholder)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="placeholder" id="single-placeholder" class="form-control" placeholder="Dropdown">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li id="single-type-container" class="form-group row">
                                        <label for="single-type" class="control-label col-4">
                                            Field Type *
                                            <br><small>(Select One)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="type" id="single-type" class="form-control">
                                                        <option value="dropdown">Dropdown Menu</option>
                                                        <option value="radio">Radio Buttons</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group dropdown-control row">
                                        <label for="single-with-search" class="control-label col-4">
                                            Live Search
                                            <br><small>(Use Live Search)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="with-search" id="single-with-search" class="switch"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group dropdown-control row">
                                        <label for="single-with-image" class="control-label col-4">
                                            With Image
                                            <br><small>(Options with Image)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="with-image" id="single-with-image" class="switch"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group radio-control row">
                                        <label for="single-radio-inline" class="control-label col-4">
                                            Inline
                                            <br><small>(Inline Radio Buttons)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="radio-inline" id="single-radio-inline" class="switch"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group dropdown-control image-control row">
                                        <label for="single-image-path" class="control-label col-4">
                                            Image Path
                                            <br><small>(Images Folder Location)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-folder-open-o"></i></span>
                                                    <input type="text" name="image-path" id="single-image-path" class="form-control" placeholder="uploads/images/image_folder/" value="uploads/images/image_folder/">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="single-data-source" class="control-label col-4">
                                            Field Data *
                                            <br><small>(Select One)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="data-source" id="single-data-source" class="form-control">
                                                        <option value="custom" selected="selected">Custom Data</option>
                                                        <option value="database">From Database</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li id="single-custom-data-container" class="form-group custom-control row">
                                        <label for="single-custom-data" class="control-label col-4">
                                            Custom Data *
                                            <br><small>(Add Data)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="data">
                                                    <input type="text" name="single-data[][text]" id="single-selected-text" class="form-control value input-sm" required="true" placeholder="Option Default Text">
                                                    <input type="text" name="single-data[][value]" id="single-selected-value"  class="form-control text input-sm" required="true" placeholder="Option Default Value">
                                                    <input type="text" name="single-data[][image]" id="single-selected-image" class="form-control image input-sm image-control" required="true" placeholder="URL or path" value="uploads/images/folder/some_image.jpg">
                                                    <div class="btn-group btn-group-sm">
                                                        <a href="javascript:void(0)" class="btn btn-default btn-sm btn-add"><i class="fa fa-plus"></i></a>
                                                        <a href="javascript:void(0)" id="single-clear-btn" class="btn btn-default btn-sm"><i class="fa fa-trash-o"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group database-control row">
                                        <label for="single-db-table-name" class="control-label col-4">
                                            Table Name *
                                            <br><small>(Database Table Name)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="db-table-name" id="single-db-table-name" class="form-control" placeholder="db_clients">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group database-control row">
                                        <label for="single-singular-name" class="control-label col-4">
                                            Singular Name *
                                            <br><small>(Singular Data Name)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="singular-name" id="single-singular-name" class="form-control" placeholder="client">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group database-control row">
                                        <label for="single-plural-name" class="control-label col-4">
                                            Plural Name *
                                            <br><small>(Plural Data Name)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="plural-name" id="single-plural-name" class="form-control" placeholder="clients">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group database-control row">
                                        <label for="single-foreign-key" class="control-label col-4">
                                            Foreign Key *
                                            <br><small>(Foreign Key)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="foreign-key" id="single-foreign-key" class="form-control" placeholder="client_id">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group database-control row">
                                        <label for="single-db-value" class="control-label col-4">
                                            Attribute Value *
                                            <br><small>(Value of the Option/Radio)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="db-value" id="single-db-value" class="form-control" placeholder="client_id">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group database-control row">
                                        <label for="single-db-text" class="control-label col-4">
                                            Attribute Text *
                                            <br><small>(Text Shown for the Option/Radio)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="db-text" id="single-db-text" class="form-control" placeholder="client_name">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li id="single-db-image-container" class="form-group database-control image-control row">
                                        <label for="single-db-image" class="control-label col-4">
                                            Attribute Image *
                                            <br><small>(Image Shown for the Option)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="db-image" id="single-db-image" class="form-control" placeholder="client_photo">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </fieldset>

                            <fieldset class="col-6">
                                <legend class="align-left">Column 2</legend>
                                <ul>
                                    <li class="form-group row">
                                        <label class="control-label col-4">
                                            Validations
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="single-trim" class="switch" checked="checked" value="trim">Trim</label>
                                                    </div>
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="single-required" class="switch" checked="checked" value="required">Required</label>
                                                    </div>
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="single-xss-clean" class="switch" checked="checked" value="xss_clean">XSS Clean</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="single-show-list" class="control-label col-4">
                                            Show on List
                                            <br><small>(Show on Tables)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="show-list" id="single-show-list" class="switch" checked="checked">Show on List</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="single-searchable" class="control-label col-4">
                                            Searchable
                                            <br><small>(APIs and Tables)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="searchable" id="single-searchable" class="switch" checked="checked">Searchable</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="single-show-api" class="control-label col-4">
                                            Show on API
                                            <br><small>(Show on API return values)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="show-api" id="single-show-api" class="switch" checked="checked">Show on API</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group dropdown-control row">
                                        <label for="single-icon" class="control-label col-4">
                                            Icon *
                                            <br><small>(Use Icon - Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="icon" id="single-icon" class="form-control">
                                                        <option value="right">Right</option>
                                                        <option value="left" selected>Left</option>
                                                        <option value="both">Both</option>
                                                        <option value="none">None</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group dropdown-control row">
                                        <label for="single-change-icon" class="control-label col-4">
                                            Change Icon
                                            <br><small>(Fontawesome or Text - Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="change-icon" id="single-change-icon" class="form-control" placeholder="&lt;i class=&quot;fa fa-edit&quot;&gt;&lt;/i&gt; or $">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="single-guideline" class="control-label col-4">
                                            Guideline
                                            <br><small>(Add Guideline)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="guideline" id="single-guideline" class="form-control">
                                                        <option value="none" selected="selected">None</option>
                                                        <option value="input-above">Above Input</option>
                                                        <option value="input-tooltip">Input Tooltip</option>
                                                        <option value="label-tooltip">Label Tooltip</option>
                                                        <option value="label">Below Label</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group guideline-control row">
                                        <label for="single-guideline-title" class="control-label col-4">
                                            Guideline Title *
                                            <br><small>(Guideline title for Tooltips)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="guideline-title" id="single-guideline-title" class="form-control" placeholder="Guideline">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group guideline-control row">
                                        <label for="single-guideline-text" class="control-label col-4">
                                            Guideline Text *
                                            <br><small>(Type Guideline)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <textarea name="guideline-text" id="single-guideline-text" class="form-control" placeholder="User Guideline"></textarea>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="single-horizontal-size" class="control-label col-4">
                                            Horizontal Size *
                                            <br><small>(Input Width)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="horizontal-size" id="single-horizontal-size" class="form-control">
                                                        <optgroup label="Static Sizing">
                                                            <option value="x-small">X-Small</option>
                                                            <option value="small">Small</option>
                                                            <option value="medium">Medium</option>
                                                            <option value="large">Large</option>
                                                            <option value="x-large">X-large</option>
                                                        </optgroup>
                                                        <optgroup label="Dynamic Sizing">
                                                            <option value="col-2">2 Columns</option>
                                                            <option value="col-3">3 Columns</option>
                                                            <option value="col-4">4 Columns</option>
                                                            <option value="col-5">5 Columns</option>
                                                            <option value="col-6">6 Columns</option>
                                                            <option value="col-7">7 Columns</option>
                                                            <option value="col-8">8 Columns</option>
                                                            <option value="col-9">9 Columns</option>
                                                            <option value="col-0">10 Columns</option>
                                                            <option value="col-11">11 Columns</option>
                                                            <option value="col-12" selected>12 Columns</option>
                                                        </optgroup>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="single-vertical-size" class="control-label col-4">
                                            Vertical Size *
                                            <br><small>(Input Height)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="vertical-size" id="single-vertical-size" class="form-control">
                                                        <option value="input-sm">Small</option>
                                                        <option value="" selected="selected">Medium</option>
                                                        <option value="input-lg">Large</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="single-position" class="control-label col-4">
                                            Position *
                                            <br><small>(Input Position)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="position" id="single-position" class="form-control">
                                                        <option value="pull-left" selected="selected">Left</option>
                                                        <option value="align-center">Center</option>
                                                        <option value="pull-right">Right</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                </ul>
                            </fieldset>
                        </form>
                    </div>
                    <div id="single-modal-footer" class="modal-footer">
                        <button type="button" id="single-cancel-btn" data-dismiss="modal" class="btn btn-default">Close</button>
                        <button type="button" id="single-save-btn" class="btn btn-primary">Create Dropdown Input</button>
                    </div>
                </div>
                
                <!-- multiple input -->
                <div id="multiple-modal" class="modal container fade" tabindex="-1" style="display: none;">
                    <div id="multiple-modal-header" class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 id="multiple-modal-title" class="modal-title">Dropdown Input</h4>
                    </div>
                    <div id="multiple-modal-body" class="modal-body">
                        <div class="guideline bg-info">
                            <i class="icon-info-sign icon-large"></i> Fields marked with <code>*</code> are required.
                        </div>
                        <form id="multiple-form" class="form-bordered form-horizontal form-column">
                            <fieldset class="col-6">
                                <legend class="align-left">Column 1</legend>
                                <ul>
                                    <li class="form-group row">
                                        <label for="multiple-label" class="control-label col-4">
                                            Label *
                                            <br><small>(Input Label)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="label" id="multiple-label" class="form-control">
                                                        <option value="left">Left</option>
                                                        <option value="right" selected="selected">Right</option>
                                                        <option value="center">Center</option>
                                                        <option value="none">None</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group label-control row">
                                        <label for="multiple-bold-label" class="control-label col-4">
                                            Bold Label
                                            <br><small>(Make Labels Bold)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="bold-label" id="multiple-bold-label" class="switch" >Bold Label</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group label-control row">
                                        <label for="multiple-label-text" class="control-label col-4">
                                            Label Text
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="label-text" id="multiple-label-text" class="form-control" placeholder="Dropdown">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="multiple-name" class="control-label col-4">
                                            Field Name *
                                            <br><small>(No Spaces)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="name" id="multiple-name" class="form-control" placeholder="dropdown">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="multiple-id" class="control-label col-4">
                                            Field ID *
                                            <br><small>(Must be Unique)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="id" id="multiple-id" class="form-control" placeholder="dropdown">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group dropdown-control tagsinput-control row">
                                        <label for="multiple-placeholder" class="control-label col-4">
                                            Placeholder
                                            <br><small>(Sample Placeholder)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="placeholder" id="multiple-placeholder" class="form-control" placeholder="Dropdown">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li id="multiple-type-container" class="form-group row">
                                        <label for="multiple-type" class="control-label col-4">
                                            Field Type *
                                            <br><small>(Select One)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="type" id="multiple-type" class="form-control">
                                                        <option value="dropdown">Dropdown Menu</option>
                                                        <option value="checkbox">Checkbox</option>
                                                        <option value="tagsinput">Tagsinput</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group dropdown-control row">
                                        <label for="multiple-with-search" class="control-label col-4">
                                            Live Search
                                            <br><small>(Use Live Search)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="with-search" id="multiple-with-search" class="switch"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group dropdown-control row">
                                        <label for="multiple-with-image" class="control-label col-4">
                                            With Image
                                            <br><small>(Options with Image)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="with-image" id="multiple-with-image" class="switch"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group checkbox-control row">
                                        <label for="multiple-radio-inline" class="control-label col-4">
                                            Inline
                                            <br><small>(Inline Checkboxes)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="radio-inline" id="multiple-radio-inline" class="switch"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group tagsinput-control row">
                                        <label for="multiple-tagsinput-fix" class="control-label col-4">
                                            Fixed Choices
                                            <br><small>(Fixed Tagsinput Choices)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="tagsinput-fix" id="multiple-tagsinput-fix" class="switch"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group dropdown-control image-control row">
                                        <label for="multiple-image-path" class="control-label col-4">
                                            Image Path
                                            <br><small>(Images Folder Location)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-folder-open-o"></i></span>
                                                    <input type="text" name="image-path" id="multiple-image-path" class="form-control" placeholder="uploads/images/image_folder/" value="uploads/images/image_folder/">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group fixed-control row">
                                        <label for="multiple-data-source" class="control-label col-4">
                                            Field Data *
                                            <br><small>(Select One)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="data-source" id="multiple-data-source" class="form-control">
                                                        <option value="custom" selected="selected">Custom Data</option>
                                                        <option value="database">From Database</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li id="multiple-custom-data-container" class="form-group fixed-control custom-control row">
                                        <label for="multiple-custom-data" class="control-label col-4">
                                            Custom Data *
                                            <br><small>(Add Data)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="data">
                                                    <input type="text" name="multiple-data[][text]" id="multiple-selected-text" class="form-control value input-sm" required="true" placeholder="Option Default Text">
                                                    <input type="text" name="multiple-data[][value]" id="multiple-selected-value"  class="form-control text input-sm" required="true" placeholder="Option Default Value">
                                                    <input type="text" name="multiple-data[][image]" id="multiple-selected-image" class="form-control image input-sm image-control" required="true" placeholder="URL or path" value="uploads/images/folder/some_image.jpg">
                                                    <div class="btn-group btn-group-sm">
                                                        <a href="javascript:void(0)" class="btn btn-default btn-sm btn-add"><i class="fa fa-plus"></i></a>
                                                        <a href="javascript:void(0)" id="multiple-clear-btn" class="btn btn-default btn-sm"><i class="fa fa-trash-o"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group database-control row">
                                        <label for="multiple-db-table-name" class="control-label col-4">
                                            Table Name *
                                            <br><small>(Database Table Name)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="db-table-name" id="multiple-db-table-name" class="form-control" placeholder="db_clients">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group database-control row">
                                        <label for="multiple-singular-name" class="control-label col-4">
                                            Singular Name *
                                            <br><small>(Singular Data Name)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="singular-name" id="multiple-singular-name" class="form-control" placeholder="client">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group database-control row">
                                        <label for="multiple-plural-name" class="control-label col-4">
                                            Plural Name *
                                            <br><small>(Plural Data Name)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="plural-name" id="multiple-plural-name" class="form-control" placeholder="clients">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group database-control row">
                                        <label for="multiple-foreign-key" class="control-label col-4">
                                            Foreign Key *
                                            <br><small>(Foreign Key)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="foreign-key" id="multiple-foreign-key" class="form-control" placeholder="client_id">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group database-control row">
                                        <label for="multiple-db-value" class="control-label col-4">
                                            Attribute Value *
                                            <br><small>(Value of the Option/Radio)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="db-value" id="multiple-db-value" class="form-control" placeholder="client_id">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group database-control row">
                                        <label for="multiple-db-text" class="control-label col-4">
                                            Attribute Text *
                                            <br><small>(Text Shown for the Option/Radio)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="db-text" id="multiple-db-text" class="form-control" placeholder="client_name">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li id="multiple-db-image-container" class="form-group database-control image-control row">
                                        <label for="multiple-db-image" class="control-label col-4">
                                            Attribute Image *
                                            <br><small>(Image Shown for the Option)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="db-image" id="multiple-db-image" class="form-control" placeholder="client_photo">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </fieldset>

                            <fieldset class="col-6">
                                <legend class="align-left">Column 2</legend>
                                <ul>
                                    <li class="form-group row">
                                        <label class="control-label col-4">
                                            Validations
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="multiple-trim" class="switch" checked="checked" value="trim">Trim</label>
                                                    </div>
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="multiple-required" class="switch" checked="checked" value="required">Required</label>
                                                    </div>
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="multiple-xss-clean" class="switch" checked="checked" value="xss_clean">XSS Clean</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="multiple-show-list" class="control-label col-4">
                                            Show on List
                                            <br><small>(Show on Tables)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="show-list" id="multiple-show-list" class="switch" checked="checked">Show on List</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="multiple-searchable" class="control-label col-4">
                                            Searchable
                                            <br><small>(APIs and Tables)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="searchable" id="multiple-searchable" class="switch" checked="checked">Searchable</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="multiple-show-api" class="control-label col-4">
                                            Show on API
                                            <br><small>(Show on API return values)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="show-api" id="multiple-show-api" class="switch" checked="checked">Show on API</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group dropdown-control row">
                                        <label for="multiple-icon" class="control-label col-4">
                                            Icon *
                                            <br><small>(Use Icon - Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="icon" id="multiple-icon" class="form-control">
                                                        <option value="right">Right</option>
                                                        <option value="left" selected>Left</option>
                                                        <option value="both">Both</option>
                                                        <option value="none">None</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group dropdown-control row">
                                        <label for="multiple-change-icon" class="control-label col-4">
                                            Change Icon
                                            <br><small>(Fontawesome or Text - Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="change-icon" id="multiple-change-icon" class="form-control" placeholder="&lt;i class=&quot;fa fa-edit&quot;&gt;&lt;/i&gt; or $">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="multiple-guideline" class="control-label col-4">
                                            Guideline
                                            <br><small>(Add Guideline)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="guideline" id="multiple-guideline" class="form-control">
                                                        <option value="none" selected="selected">None</option>
                                                        <option value="input-above">Above Input</option>
                                                        <option value="input-tooltip">Input Tooltip</option>
                                                        <option value="label-tooltip">Label Tooltip</option>
                                                        <option value="label">Below Label</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group guideline-control row">
                                        <label for="multiple-guideline-title" class="control-label col-4">
                                            Guideline Title *
                                            <br><small>(Guideline title for Tooltips)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="guideline-title" id="multiple-guideline-title" class="form-control" placeholder="Guideline">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group guideline-control row">
                                        <label for="multiple-guideline-text" class="control-label col-4">
                                            Guideline Text *
                                            <br><small>(Type Guideline)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <textarea name="guideline-text" id="multiple-guideline-text" class="form-control" placeholder="User Guideline"></textarea>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="multiple-horizontal-size" class="control-label col-4">
                                            Horizontal Size *
                                            <br><small>(Input Width)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="horizontal-size" id="multiple-horizontal-size" class="form-control">
                                                        <optgroup label="Static Sizing">
                                                            <option value="x-small">X-Small</option>
                                                            <option value="small">Small</option>
                                                            <option value="medium">Medium</option>
                                                            <option value="large">Large</option>
                                                            <option value="x-large">X-large</option>
                                                        </optgroup>
                                                        <optgroup label="Dynamic Sizing">
                                                            <option value="col-2">2 Columns</option>
                                                            <option value="col-3">3 Columns</option>
                                                            <option value="col-4">4 Columns</option>
                                                            <option value="col-5">5 Columns</option>
                                                            <option value="col-6">6 Columns</option>
                                                            <option value="col-7">7 Columns</option>
                                                            <option value="col-8">8 Columns</option>
                                                            <option value="col-9">9 Columns</option>
                                                            <option value="col-0">10 Columns</option>
                                                            <option value="col-11">11 Columns</option>
                                                            <option value="col-12" selected>12 Columns</option>
                                                        </optgroup>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="multiple-vertical-size" class="control-label col-4">
                                            Vertical Size *
                                            <br><small>(Input Height)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="vertical-size" id="multiple-vertical-size" class="form-control">
                                                        <option value="input-sm">Small</option>
                                                        <option value="" selected="selected">Medium</option>
                                                        <option value="input-lg">Large</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="multiple-position" class="control-label col-4">
                                            Position *
                                            <br><small>(Input Position)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="position" id="multiple-position" class="form-control">
                                                        <option value="pull-left" selected="selected">Left</option>
                                                        <option value="align-center">Center</option>
                                                        <option value="pull-right">Right</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                </ul>
                            </fieldset>
                        </form>
                    </div>
                    <div id="multiple-modal-footer" class="modal-footer">
                        <button type="button" id="multiple-cancel-btn" data-dismiss="modal" class="btn btn-default">Close</button>
                        <button type="button" id="multiple-save-btn" class="btn btn-primary">Create Dropdown Input</button>
                    </div>
                </div>
                
                <!-- masked input -->
                <div id="masked-input-modal" class="modal container fade" tabindex="-1" style="display: none;">
                    <div id="masked-input-modal-header" class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 id="masked-input-modal-title" class="modal-title">Masked Input</h4>
                    </div>
                    <div id="masked-input-modal-body" class="modal-body">
                        <div class="guideline bg-info">
                            <i class="icon-info-sign icon-large"></i> Fields marked with <code>*</code> are required.
                        </div>
                        <form id="masked-input-form" class="form-bordered form-horizontal form-column">
                            <fieldset class="col-6">
                                <legend class="align-left">Column 1</legend>
                                <ul>
                                    <li class="form-group row">
                                        <label for="masked-input-label" class="control-label col-4">
                                            Label *
                                            <br><small>(Input Label)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="label" id="masked-input-label" class="form-control">
                                                        <option value="left">Left</option>
                                                        <option value="right" selected="selected">Right</option>
                                                        <option value="center">Center</option>
                                                        <option value="none">None</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group label-control row">
                                        <label for="masked-input-bold-label" class="control-label col-4">
                                            Bold Label
                                            <br><small>(Make Labels Bold)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="bold-label" id="masked-input-bold-label" class="switch"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group label-control row">
                                        <label for="masked-input-label-text" class="control-label col-4">
                                            Label Text
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="label-text" id="masked-input-label-text" class="form-control" placeholder="Title">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="masked-input-name" class="control-label col-4">
                                            Field Name *
                                            <br><small>(No Spaces)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="name" id="masked-input-name" class="form-control" placeholder="title">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="masked-input-id" class="control-label col-4">
                                            Field ID *
                                            <br><small>(Must be Unique)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="id" id="masked-input-id" class="form-control" placeholder="title">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="masked-input-placeholder" class="control-label col-4">
                                            Placeholder
                                            <br><small>(Sample Placeholder)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="placeholder" id="masked-input-placeholder" class="form-control" placeholder="This is a title field">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="masked-input-initial-value" class="control-label col-4">
                                            Initial Value
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="initial-value" id="masked-input-initial-value" class="form-control" placeholder="Initial Value">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li id="masked-input-type-container" class="form-group row">
                                        <label for="masked-input-type" class="control-label col-4">
                                            Field Type *
                                            <br><small>(Select One)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="type" id="masked-input-type" class="form-control">
                                                        <optgroup label="Date and Time">
                                                            <option value="time">Time (12:30 pm)</option>
                                                            <option value="slash-date" selected>Date (dd/mm/yyyy)</option>
                                                            <option value="dash-date">Date (dd-mm-yyyy)</option>
                                                            <option value="datetime" selected>Datetime (dd/mm/yyyy 12:30 pm)</option>
                                                        </optgroup>
                                                        <optgroup label="Color Values">
                                                            <option value="hex">Hex #ffffff</option>
                                                        </optgroup>
                                                        <optgroup label="Customize">
                                                            <option value="custom">Custom</option>
                                                        </optgroup>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group custom-control row">
                                        <label for="masked-input-mask" class="control-label col-4">
                                            Mask *
                                            <br><small>(*=[0-9a-z], 9=[0-9], a=[a-z])</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="mask" id="masked-input-mask" class="form-control" placeholder="*** 999 aaa">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li id="masked-input-db-type-container" class="form-group row">
                                        <label for="masked-input-db-type" class="control-label col-4">
                                            Data Type *
                                            <br><small>(Select One)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="db-type" id="masked-input-db-type" class="form-control">
                                                        <option class="text" value="varchar" selected="selected">Varchar</option>
                                                        <option class="text" value="text">Text</option>
                                                        <option class="text" value="mediumtext">Medium Text</option>
                                                        <option class="text" value="longtext">Long Text</option>
                                                        <option class="text" value="tinyblob">Tiny Blob</option>
                                                        <option class="text" value="mediumblob">Medium Blob</option>
                                                        <option class="text" value="blob">Blob</option>
                                                        <option class="text" value="longblob">Long Blob</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="masked-input-min-length" class="control-label col-4">
                                            Min Length
                                            <br><small>(Minimum Characters)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="min-length" id="masked-input-min-length" class="form-control" placeholder="2">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="masked-input-max-length" class="control-label col-4">
                                            Max Length *
                                            <br><small>(Maximum Characters)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="max-length" id="masked-input-max-length" class="form-control" placeholder="1000" value="1000">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </fieldset>

                            <fieldset class="col-6">
                                <legend class="align-left">Column 2</legend>
                                <ul>
                                    <li class="form-group row">
                                        <label class="control-label col-4">
                                            Validations
                                            <br><small>(Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="masked-input-trim" class="switch" checked="checked" value="trim">Trim</label>
                                                    </div>
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="masked-input-required" class="switch" checked="checked" value="required">Required</label>
                                                    </div>
                                                    <div class="checkbox">
                                                        <label class="control-label"><input type="checkbox" name="validations[]" id="masked-input-xss-clean" class="switch" checked="checked" value="xss_clean">XSS Clean</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="masked-input-show-list" class="control-label col-4">
                                            Show on List
                                            <br><small>(Show on Tables)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="show-list" id="masked-input-show-list" class="switch" checked="checked"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="masked-input-searchable" class="control-label col-4">
                                            Searchable
                                            <br><small>(APIs and Tables)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="searchable" id="masked-input-searchable" class="switch" checked="checked"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="masked-input-show-api" class="control-label col-4">
                                            Show on API
                                            <br><small>(Show on API return values)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <div class="checkbox checkbox-inline">
                                                        <label class="control-label"><input type="checkbox" name="show-api" id="masked-input-show-api" class="switch" checked="checked"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="masked-input-icon" class="control-label col-4">
                                            Icon *
                                            <br><small>(Use Icon - Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="icon" id="masked-input-icon" class="form-control">
                                                        <option value="right">Right</option>
                                                        <option value="left" selected>Left</option>
                                                        <option value="both">Both</option>
                                                        <option value="none">None</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="masked-input-change-icon" class="control-label col-4">
                                            Change Icon
                                            <br><small>(Fontawesome or Text - Optional)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="change-icon" id="masked-input-change-icon" class="form-control" placeholder="&lt;i class=&quot;fa fa-edit&quot;&gt;&lt;/i&gt; or $">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="masked-input-guideline" class="control-label col-4">
                                            Guideline
                                            <br><small>(Add Guideline)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="guideline" id="masked-input-guideline" class="form-control">
                                                        <option value="none" selected="selected">None</option>
                                                        <option value="input-above">Above Input</option>
                                                        <option value="label-tooltip">Label Tooltip</option>
                                                        <option value="input-tooltip">Input Tooltip</option>
                                                        <option value="label">Below Label</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li id="masked-input-guideline-title-container" class="form-group guideline-control row">
                                        <label for="masked-input-guideline-title" class="control-label col-4">
                                            Guideline Title *
                                            <br><small>(Guideline title for Tooltips)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                    <input type="text" name="guideline-title" id="masked-input-guideline-title" class="form-control" placeholder="Guideline">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group guideline-control row">
                                        <label for="masked-input-guideline-text" class="control-label col-4">
                                            Guideline Text *
                                            <br><small>(Type Guideline)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <textarea name="guideline-text" id="masked-input-guideline-text" class="form-control" placeholder="User Guideline"></textarea>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="masked-input-horizontal-size" class="control-label col-4">
                                            Horizontal Size *
                                            <br><small>(Input Width)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="horizontal-size" id="masked-input-horizontal-size" class="form-control">
                                                        <optgroup label="Static Sizing">
                                                            <option value="x-small">X-Small</option>
                                                            <option value="small">Small</option>
                                                            <option value="medium">Medium</option>
                                                            <option value="large">Large</option>
                                                            <option value="x-large">X-large</option>
                                                        </optgroup>
                                                        <optgroup label="Dynamic Sizing">
                                                            <option value="col-2">2 Columns</option>
                                                            <option value="col-3">3 Columns</option>
                                                            <option value="col-4">4 Columns</option>
                                                            <option value="col-5">5 Columns</option>
                                                            <option value="col-6">6 Columns</option>
                                                            <option value="col-7">7 Columns</option>
                                                            <option value="col-8">8 Columns</option>
                                                            <option value="col-9">9 Columns</option>
                                                            <option value="col-0">10 Columns</option>
                                                            <option value="col-11">11 Columns</option>
                                                            <option value="col-12" selected>12 Columns</option>
                                                        </optgroup>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="masked-input-vertical-size" class="control-label col-4">
                                            Vertical Size *
                                            <br><small>(Input Height)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="vertical-size" id="masked-input-vertical-size" class="form-control">
                                                        <option value="input-sm">Small</option>
                                                        <option value="" selected="selected">Medium</option>
                                                        <option value="input-lg">Large</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="masked-input-position" class="control-label col-4">
                                            Position *
                                            <br><small>(Input Position)</small>
                                        </label>
                                        <div class="control-group col-8">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                    <select name="position" id="masked-input-position" class="form-control">
                                                        <option value="pull-left" selected="selected">Left</option>
                                                        <option value="align-center">Center</option>
                                                        <option value="pull-right">Right</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                </ul>
                            </fieldset>
                        </form>
                    </div>
                    <div id="masked-input-modal-footer" class="modal-footer">
                        <button type="button" id="masked-input-cancel-btn" data-dismiss="modal" class="btn btn-default">Close</button>
                        <button type="button" id="masked-input-save-btn" class="btn btn-primary">Create Masked Input</button>
                    </div>
                </div>

                <!-- page-script -->
                <script type="text/javascript" src="<?= base_url() ?>js/generator/generator.js"></script>
                <script type="text/javascript" src="<?= base_url() ?>js/generator/fieldset.js"></script>
                <script type="text/javascript" src="<?= base_url() ?>js/generator/text-input.js"></script>
                <script type="text/javascript" src="<?= base_url() ?>js/generator/long-text-input.js"></script>
                <script type="text/javascript" src="<?= base_url() ?>js/generator/datetime-input.js"></script>
                <script type="text/javascript" src="<?= base_url() ?>js/generator/file-upload-input.js"></script>
                <script type="text/javascript" src="<?= base_url() ?>js/generator/color-input.js"></script>
                <script type="text/javascript" src="<?= base_url() ?>js/generator/toggle-input.js"></script>
                <script type="text/javascript" src="<?= base_url() ?>js/generator/captcha-input.js"></script>
                <script type="text/javascript" src="<?= base_url() ?>js/generator/geolocation-input.js"></script>
                <script type="text/javascript" src="<?= base_url() ?>js/generator/single-input.js"></script>
                <script type="text/javascript" src="<?= base_url() ?>js/generator/multiple-input.js"></script>
                <script type="text/javascript" src="<?= base_url() ?>js/generator/masked-input.js"></script>